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");

           }

        }

    }

});

Answer 2

为您的jQuery试试这个

$(document).ready(function() {

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

    var slctID = $(this).attr('id');

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

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

    switch(slctID) {
    case "Person-One-Select":
        if (selectedPerson !== "") {
        $("#Person-Two-Select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
        $("#Person-Three-Select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
        }
        break;
    case "Person-Two-Select":
        if (selectedPerson !== "") {
        $("#Person-One-Select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
        $("#Person-Three-Select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
        }
        break;
    case "Person-Three-Select":
        if (selectedPerson !== "") {
        $("#Person-One-Select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
        $("#Person-Two-Select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
        }
        break;
    }

});

});

Answer 3

在这里，我们跟踪当前选择的值数组，并针对它引用所有选项，如果选项的值匹配，则它们将被禁用（否定相对选择项的选择选项。）

const selectBoxes = document.querySelectorAll('select.person-select')

let chosen = []

const _disableRelated = () => {
  const options = []
  selectBoxes
  .forEach(select => {
    const unselectedOpts = [...select.querySelectorAll('option')].filter(o => o.value !== select.value)
    options.push(...unselectedOpts)
  })
  
  options.forEach(option => {
    const action = chosen.indexOf(option.value) !== -1 ? 'setAttribute' : 'removeAttribute'
    
    option[action]('disabled', null)
  })
}

const _handleChange = e => {  
  const { value  } = e.target
  
  chosen.length = 0
  selectBoxes.forEach(({ value }) => value ? chosen.push(value) : null)
  
  _disableRelated()
}

selectBoxes.forEach(select => select.addEventListener('change', _handleChange))

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

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

3 个答案: