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

【问题标题】：Disable options from value selected in previous options using data attribute使用数据属性禁用先前选项中选择的值中的选项
【发布时间】：2016-02-24 13:49:03
【问题描述】：

我正在创建一个包含 2 个下拉列表的表单，其中 1 个用于服务，1 个用于员工。员工与服务相关联，因此在第一次选择中选择服务时，只有与该服务相关联的人员才能在第二次选择中使用。我当前的表单代码是：

<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 中选定属性的值：

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

如果我执行 alert(id)，这将返回正确的值。

这是我第一次涉足数据属性，但在我的脑海中，它会在员工 > 选项上执行 each()，如果它们在 data-id 中不包含选定的服务 id，那么禁用应该是添加到选项中。

谢谢大家

【问题讨论】：

stackoverflow.com/questions/18351921/…

标签： jquery forms html-select

【解决方案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>

【讨论】：

它工作得非常好，而且非常干净。我第一次尝试复制和粘贴时出现问题。谢谢。
好的，太好了！祝你好运:)
谢谢。顺便说一句，可能有一些工作人员什么都做，所以他们可能没有 data-id 属性。我如何将此禁用的功能仅应用于具有 data-id 属性的功能？我试着用 if 包裹它，但不是快乐。
查看我的更新答案。你是这个意思吗？ Sfaff 成员 4 将始终启用。

【解决方案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>

【讨论】：