Bootstrap select dropdown list placeholder

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?


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


使用隐藏:

<select>
    <option hidden >Display but don't show in list</option>
    <option> text 1 </option>
    <option> text 2 </option>
    <option> text 3 </option>
</select>

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>
链接地址: http://www.djcxy.com/p/70594.html

上一篇: “select”标签的占位符?

下一篇: 引导程序选择下拉列表占位符