Question

我有一个来自bootstrap的简单代码供选择

<select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
</select>

这会给出一个带有下拉选项1,2,3,4和5的选择框，但选择框中显示的值为 1 。我想显示标题为＆＃34;选择数字＆＃34; 的选择框，在该下拉列表中，值应为1,2,3,4和5.

粗略的做法是添加

        <option>Select number</option>

有没有更好的方式，我可以在选择框中显示选择号码但不在列表框列表中显示。？

谢谢

Answer 1

只需在CSS中隐藏该选项即可。

CSS：

.form-control option:first-child {
    display:none;
}

工作小提琴here

注意：一旦他们选择了任何选项，他们就无法返回（使用鼠标）。键盘摇滚！

修改

您可以将HTML更改为包含

<option disabled selected>Select number</option>

这样一旦他们选择了任何选项，他们就无法回头了！

新fiddle

Answer 2

这应该对你有用

<option disabled selected="selected">Select number</option>
<option>1</option>
<option>2</option>

Answer 3

这是你的jquery代码。

function updateMenu() {
    $('.form-control').prepend('<option value="0">Select Number</option>');
    $(".form-control option:first").attr('selected','selected');
}

//initialize
$(function(){
   updateMenu();
});

//Make changes on hover
$('.form-control').hover(
    function(){
       $('option[value="0"]', this).remove(); 
    }, updateMenu 
);

Twitter Bootstrap：选择Box vs DropDown

3 个答案: