引导select下拉列表占位符
我正在尝试创build一个包含占位符的下拉列表。 它似乎并不像其他forms那样支持placeholder="stuff" 。 有没有不同的方式来获得我的下拉列表中的占位符？
是的，只是“select禁用”的选项。
<select> <option value="" selected disabled>Please select</option> <option value="">A</option> <option value="">B</option> <option value="">C</option> </select>
链接到小提琴
您也可以查看答案
使用隐藏：
<select> <option hidden >Display but don't show in list</option> <option> text 1 </option> <option> text 2 </option> <option> text 3 </option> </select>
下拉或select没有占位符，因为HTML不支持它，但可以创build相同的效果，所以它看起来像其他input占位符相同
$('select').change(function() { if ($(this).children('option:first-child').is(':selected')) { $(this).addClass('placeholder'); } else { $(this).removeClass('placeholder'); } });
.placeholder{color: grey;} select option:first-child{color: grey; display: none;} select option{color: #555;} // bootstrap default color
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="form-control placeholder"> <option value="">Your Placeholder Text</option> <option value="1">Text 1</option> <option value="2">Text 2</option> <option value="3">Text 3</option> </select>
尝试这将工作更好:)
<select class="form-control" required> <option value="" selected hidden>Select...</option>
当使用required + value=""用户不能使用hidden的选项将其隐藏，从选项列表中隐藏，当用户打开选项框
试试@title =“东西”。 它为我工作。
使用Bootstrap，这是你可以做的。 使用类“文本隐藏”，禁用选项将首先显示，但不在列表中。
<select class="form-control" > <option selected disabled class="text-hide">Title</option> <option>A</option> <option>B</option> <option>C</option> </select>
添加隐藏属性：
<select> <option value="" selected disabled hidden>Please select</option> <option value="">A</option> <option value="">B</option> <option value="">C</option> </select>
这是另一种方法
<select name="GROUPINGS[xxxxxx]" style="width: 60%;" required> <option value="">Choose Platform</option> <option value="iOS">iOS</option> <option value="Android">Android</option> <option value="Windows">Windows</option> </select>
“select平台”成为占位符，“必需”属性确保用户必须select其中一个选项。
非常有用，当你不想用户字段名称或标签。
Bootstrap select有一个noneSelectedText选项。 您可以通过data-none-selected-text属性进行设置。 文档 。
所有这些选项都是….即兴创作。 Bootstrap已经为此提供了一个解决scheme。 如果您想更改所有下拉元素的占位符，则可以更改其值
引导文件中的noneSelectedText。
要改变个人，你可以使用TITLE参数。
例：
<div class="form-group"> <label class="control-label col-xs-2" id="country">Continent:</label> <div class="col-xs-9"> <select name="zones[]" class="selectpicker" title="All continents" id="zones" multiple > <option value="Africa">Africa</option> <option value="Asia">Asia</option> <option value="North America">America North</option> <option value="South America">America South</option> <option value="Antarctica">Antarctica</option> <option value="Australia">Australia</option> <option value="Europe">Europe</option> </select> </div> </div>
对于.html页面
<select> <option value="" selected disabled>Please select</option> <option value="">A</option> <option value="">B</option> <option value="">C</option> </select>
为.jsp或任何其他的servlet页面。
<select> <option value="" selected="true" disabled="true">Please select</option> <option value="">A</option> <option value="">B</option> <option value="">C</option> </select>
- 在
bootstrap-select.js查找title: null,并将其删除。 - 在
<select>元素中添加title="YOUR TEXT"。 - 好:)
例：
<select title="Please Choose one item"> <option value="">A</option> <option value="">B</option> <option value="">C</option> </select>
