Html Bootstrap 选择下拉列表占位符
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/22822427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap select dropdown list placeholder
提问by Jordan.J.D
I am trying to make a dropdown list that contains a placeholder. It doesn't seem to support placeholder="stuff"
as other forms do. Is there a different way to obtain a placeholder in my dropdown?
我正在尝试制作一个包含占位符的下拉列表。它似乎placeholder="stuff"
不像其他形式那样支持。有没有其他方法可以在我的下拉列表中获取占位符?
回答by Brakke
Yes just "selected disabled" in the option.
是的,只是在选项中“选择禁用”。
<select>
<option value="" selected disabled>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
You can also view the answer at
您也可以在以下位置查看答案
回答by Jay Lin
Use hidden:
使用隐藏:
<select>
<option hidden >Display but don't show in list</option>
<option> text 1 </option>
<option> text 2 </option>
<option> text 3 </option>
</select>
回答by NeoNe
dropdown or selectdoesn't have a placeholder because HTML doesn't support it but it's possible to create same effect so it looks the same as other inputs placeholder
dropdown 或select没有占位符,因为 HTML 不支持它,但可以创建相同的效果,因此它看起来与其他输入占位符相同
$('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>
if you want to see first option in list remove display property from css
如果您想查看列表中的第一个选项,请从 css 中删除显示属性
回答by Chadillac
If you are initializing the select field through javascript, the following can be added to replace the default placeholder text
如果你是通过javascript初始化选择字段,可以添加以下内容来替换默认的占位符文本
noneSelectedText: 'Insert Placeholder text'
noneSelectedText: 'Insert Placeholder text'
example: if you have:
例如:如果你有:
<select class='picker'></select>
in your javascript, you initialize the selectpicker like this
在你的javascript中,你像这样初始化selectpicker
$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});
回答by Mark van Lit
Add hidden attribute:
添加隐藏属性:
<select>
<option value="" selected disabled hidden>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
回答by Bassem Shahin
Try this:
尝试这个:
<select class="form-control" required>
<option value="" selected hidden>Select...</option>
when using required
+ value=""
then user can not select it
using hidden
will make it hidden from the options list, when the user open the options box
当使用required
+value=""
然后用户不能选择它使用hidden
将使它从选项列表中隐藏,当用户打开选项框时
回答by VGranin
Most of the options are problematic for multi-select. Place Title attribute, and make first option as data-hidden="true"
大多数选项对于多选都有问题。放置 Title 属性,并将第一个选项设为 data-hidden="true"
<select class="selectpicker" title="Some placeholder text...">
<option data-hidden="true"></option>
<option>First</option>
<option>Second</option>
</select>
回答by Tudor
All this options are.... improvisations. Bootstrap already offers a solution for this. If you want to change the placeholder for all your dropdown elements you can change the value of
所有这些选择都是......即兴创作。Bootstrap 已经为此提供了解决方案。如果您想更改所有下拉元素的占位符,您可以更改
noneSelectedText in the bootstrap file.
引导文件中的 noneSelectedText。
To change individualy, you can use TITLE parameter.
要单独更改,您可以使用 TITLE 参数。
example:
例子:
<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>
回答by Gabriel Janson
Try @title = "stuff". It worked for me.
试试@title = "东西"。它对我有用。
回答by Amir Hossein Khateri
- in
bootstrap-select.js
Findtitle: null,
and remove it. - add
title="YOUR TEXT"
in<select>
element. - Fine :)
- 在
bootstrap-select.js
查找title: null,
并删除它。 - 添加
title="YOUR TEXT"
的<select>
元素。 - 美好的 :)
Example:
例子:
<select title="Please Choose one item">
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>