javascript - 禁用选择字段并将 "disabled"显示为选定选项

Question

我有一个 html 选择字段和两个 javascript 方法 - 一个用于启用选择字段，另一个用于启用:

enable(){
  $('#s').prop('disabled', false);
}

disable(){
  $('#s').prop('disabled', true);
}

<select id="s">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

现在调用启用和禁用方法可以实现它们的预期目的。但除了在禁用方法中禁用该字段之外，我还希望该字段在禁用时显示“不可用”。我无法找到一种方法在没有实际选项的情况下在选择字段中显示类似的内容。那么，最好的解决方案是在禁用方法中添加一个选项并将其设置为选定状态，然后在启用方法中将其删除，还是有更干净的可用方法？

Answer 1

您可以将这两个功能合并为一个。

function toggleDisabled() {
  var dropdown = $('#s');
  var disabled = dropdown.prop('disabled');
  if (!disabled) {
    // add option to the top of the list
    dropdown.prepend('<option>unavailable</option>');
  } else {
    // remove any option with no value
    $('option:not([value])', dropdown).remove();
  }
  // flip disabled and change current value to first
  dropdown.prop('disabled', !disabled).val($('option:first', dropdown).val());
}

// just for testing

$('button').click(function() {
  toggleDisabled();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<button>click me</button>