使用数据属性从先前选项中选择的值禁用选项

Question

我正在创建一个包含 2 个下拉菜单的表单，1 个用于服务，1 个用于员工。工作人员链接到服务，因此当服务在第一个 select 中被 select 编辑时，只有链接到该服务的人员才能在第二个 select 中使用。我当前的表单代码是：

<select name="service" id="service">
    <option data-id="1">Service 1</option>
    <option data-id="2">Service 2</option>
    <option data-id="3">Service 3</option>
</select>

<select name="staff" id="staff">
    <option data-id="1">Staff 1</option>
    <option data-id="1 2">Staff 2</option>
    <option data-id="1 3">Staff 3</option>
</select>

您会看到一名工作人员可能会提供不止一项服务（为简单起见，我删除了这些值）。

我现在唯一的 jQuery 是读取 #service:

中 selected 属性的值

<script>
    $("#service").on("change", function() {
        id = ($(this).find(":selected").data("id"));
    });
</script>

如果我做 alert(id)，这 returns 是正确的值。

这是我第一次涉足数据属性，但在我的脑海中它会做一个 each() on staff > 选项，如果它们不包含数据中的 selected 服务 ID -id，那么disabled应该加在选项里。

谢谢大家

Answer 1

$("#service").on("change", function() {
    $("#staff option").removeAttr("disabled");
     var id = ($(this).find(":selected").data("id"));
     $("#staff option[data-id]:not([data-id*='" + id + "'])").attr("disabled", "true");
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="service" id="service">
  <option data-id="1">Service 1</option>
  <option data-id="2">Service 2</option>
  <option data-id="3">Service 3</option>
</select>

<select name="staff" id="staff">
  <option data-id="1">Staff 1</option>
  <option data-id="1 2">Staff 2</option>
  <option data-id="1 3">Staff 3</option>
  <option>Staff 4</option>
</select>

Answer 2

你可以做到这一点。使用 filter() 从 staff 获取选项并禁用它们。

$("#service").on("change", function() {
  var id = $(this).find(":selected").data("id") + '';
  $("#staff option").prop('disabled', false);
  options = $("#staff option").filter(function(){
    var staffId = $(this).data('id') + '';
    var arr = staffId.split(' ');
    return $.inArray(id, arr) != -1;
  });
  options.prop('disabled',true)
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="service" id="service">
  <option data-id="1">Service 1</option>
  <option data-id="2">Service 2</option>
  <option data-id="3">Service 3</option>
</select>

<select name="staff" id="staff">
  <option data-id="1">Staff 1</option>
  <option data-id="1 2">Staff 2</option>
  <option data-id="1 3">Staff 3</option>
</select>

使用数据属性从先前选项中选择的值禁用选项

Disable options from value selected in previous options using data attribute

jquery

forms

html-select