Question

我正在创建一个表单，其中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>

如果我发出警报（id），则返回正确的值。

这是我第一次冒险进入数据属性，但在我的脑海里，它会在工作人员上执行每个（）＆gt;选项，如果它们不包含data-id中的所选服务ID，则应将该禁用添加到选项中。

谢谢大家

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获取选项并停用它们。

＆＃13;

$("#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');

＆＃13;

<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>

＆＃13;

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

2 个答案: