javascript - 如何使 "Select"文本在下拉菜单中不可见(由 <select> <option> 标签创建)？

Question

我正在使用<select> <option>创建我的下拉列表。我有 5 个选项，其中一个是 Select Status ＆remeing是实际的选择。我想要的是，当用户使用下拉菜单时 1.Select status应该是灰色的并且是只读的。 2. 用户应该只能看到并选择重新挖掘选项。

例如，下拉列表如下:

选择状态 - 这应该显示为灰色且只读。

所有菜单

已启用

已禁用

演示

我可以做Select Status变灰，但之后我无法完成我的任务。

HTML 代码:

<div>
  <select id="menuStatusFilter" style="padding: 4px 8px; width: 100%;">
    <option style="color:gray" value="null" >Select Status</option>
    <option>All Menus</option>
    <option>Enabled</option>
    <option>Disabled</option>
    <option>Demo</option>
  </select>
</div>

JavaScript:

$(document).ready(function () {
  $('#menuStatusFilter').color('gray');
  $('#menuStatusFilter').click(function () {
    var current = $('#select').val();
    if (current == 'null') {
      $('#menuStatusFilter').color('black');
    } else {
      $('#menuStatusFilter').color('gray');
    }
  });
});

https://jsfiddle.net/dhrkja7c/

我是 JavaScript 的新手所以我的查询可能看起来非常简单。探索。

Answer 1

这里有一个选择

https://jsfiddle.net/dhrkja7c/1/

  var current = "null"; var last = 'null';
  $('#menuStatusFilter').change(function () {
    last = current;
    current = $(this).val();
    if (current === 'null') {
      $('#menuStatusFilter').val(last);
      alert("cant change it back youre stuck");
    }
  });