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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:27:52  来源:igfitidea点击:

Bootstrap select dropdown list placeholder

htmltwitter-bootstrapplaceholder

提问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>

Link to fiddle

链接到小提琴

You can also view the answer at

您也可以在以下位置查看答案

https://stackoverflow.com/a/5859221/1225125

https://stackoverflow.com/a/5859221/1225125

回答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 hiddenwill 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

  1. in bootstrap-select.jsFind title: null,and remove it.
  2. add title="YOUR TEXT"in <select>element.
  3. Fine :)
  1. bootstrap-select.js查找title: null,并删除它。
  2. 添加title="YOUR TEXT"<select>元素。
  3. 美好的 :)


Example:

例子:

<select title="Please Choose one item">
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>