jquery - 根据之前的选择禁用选项

Question

我有四个<select>标签。它们如下:

<select name="" id="a">
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>
<select name="" id="b">
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>
<select name="" id="c">
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>
<select name="" id="d">
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>

这四个人应该有独特的选择，尽管他们有相同的元素集。那么使用 jQuery，如何禁用已选择的选项呢？准确地说，我需要从 <select> 中获取四个值。标签。

Solution and Problem

The current problem has a solution, but there's a limitation in it. Check my answer for the solution.

This solution is not scalable. If there are four <select>s, there should be four variables and the manual process to make them is tedious. Expecting a better solution.

Answer 1

每次选择更改时，只需循环遍历每个选择，然后在值匹配的所有其他选择中禁用该选项:

$('select').on('change', function() {

    /* enable any previously disabled options */
    $('option[disabled]').prop('disabled', false);

    /* loop over each select */
    $('select').each(function() {

       /* for every other select, disable option which matches this this.value */
       $('select').not(this).find('option[value="' + this.value + '"]').prop('disabled', true); 

    });

});

Here's a fiddle