如何使“选择”文本在下拉列表中不可见（由 <select> <option> 标签创建）？

Question

我正在使用<select> <option> 创建我的下拉菜单。我有 5 个选项，其中一个是 Select Status & remeiing 是实际选项。我想要的是，当用户使用下拉 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");
    }
  });