javascript - 禁用选择列表中具有相同类名的多个特定选项

Question

在我的创建表单上，我有 3 个选择列表，它们都具有相同的值。但是，不能为多个选择选择同一选项。因此，如果我在第一个选择中选择选项一个..那么我应该无法在其他两个选择中选择该选项。

我几乎有了它，但我遇到了一个问题，如果我选择一个选项，则禁用对其他两个选项有效，但一旦我为第二个选择选择一个选项，那么我选择的选项对于第三个选择中的选项，第一个选择中的选项再次变为事件状态。

这是我所拥有的:

HTML

<select id="Person-One-Select" class="person-select">
  <option value="">-- Select Person One --</option>
  <option value="John Doe">John Doe</option>
  <option value="Jane Doe">Jane Doe</option>
  <option value="Babe Ruth">Babe Ruth</option>
  <option value="Ted Williams">Ted Williams</option>
  <option value="Pete Rose">Pete Rose</option>
</select>

<select id="Person-Two-Select" class="person-select">
  <option value="">-- Select Person Two --</option>
  <option value="John Doe">John Doe</option>
  <option value="Jane Doe">Jane Doe</option>
  <option value="Babe Ruth">Babe Ruth</option>
  <option value="Ted Williams">Ted Williams</option>
  <option value="Pete Rose">Pete Rose</option>
</select>

<select id="Person-Three-Select" class="person-select">
  <option value="">-- Select Person Three --</option>
  <option value="John Doe">John Doe</option>
  <option value="Jane Doe">Jane Doe</option>
  <option value="Babe Ruth">Babe Ruth</option>
  <option value="Ted Williams">Ted Williams</option>
  <option value="Pete Rose">Pete Rose</option>
</select>

jQuery

$(document).ready(function() {

// Get value of Person Select on change
$(".person-select").change(function() {

    // reset all value to be active
    $(".person-select option").prop("disabled", false);

    // get value
    var selectedPerson = $(this).val();

    // look for value in 2nd and 3rd selects and disable them
    if (selectedPerson !== "") {
        $(".person-select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
    }

});


});

我有一个JSFiddle展示一个工作示例。

Answer 1

你的问题是这一行:

    $(".person-select option").prop("disabled", false);

当您从下一个下拉菜单中进行选择时，它将撤消以前禁用的选项。然后，您仅禁用所选下拉列表中具有名称值的选项，从而有效地撤消先前的下拉选择禁用。

您应该做的是在单击一个下拉菜单时检查所有下拉菜单，撤消所有下拉菜单的禁用，然后根据所有下拉菜单中当前选择的名称重新禁用所有选项。所以这个:

    // Get value of Person Select on change
$(".person-select").change(function() {

    //Select all drop downs
    var all_selects = $(".person-select");
    $(".person-select option").prop("disabled", false); //Activate all, but we will redisable appropriate ones next.

    //Recurse. Look at each drop down, and then compare against all drop downs that exist.
    for(var x = 0; x < all_selects.length; x++) {

        //Get selected name from each drop down, and then compare it against all drop downs, so that we can disable an option with the same value in other dropdowns.
        var currentSelection = $(all_selects[x]).prop("id");
        for(var y = 0; y < all_selects.length; y++) {

           //Ignore self. We do not want to disable the option with the above currentSelection value within that dropwdown, as it will prevent form submission of the selected value.
           if(currentSelection == $(all_selects[y]).prop("id")) continue;

           //Now, disable duplicate options in OTHER drop downs.
           var selectedPerson = $(all_selects[x]).val();
           if (selectedPerson !== "") {

               $(all_selects[y]).find("option[value='" + selectedPerson + "']").attr("disabled","disabled");

           }

        }

    }

});