Question

我有4个选择下拉列表，我希望每个选项都是非重复的，或者不能选择两次。

步骤1 - 如果我从DROPDOWN 1中选择两个，则应禁用其他3个下拉列表中的所有第二个选择。

步骤2 - 如果我从DROPDOWN 2中选择一个，则应禁用其他3个下拉列表中的所有第一个选择，并且DROPDOWN 1中的第一个选择应保持禁用状态。

步骤3 - 如果我从DROPDOWN 3中选择3，则应禁用其他3个下拉列表中的所有选择编号3，并且DROPDOWN 1和2中的第一个，第二个选择应保持禁用状态。

步骤4-如果我从DROPDOWN 4中选择4，则应禁用其他3个下拉列表中的所有选择编号4，并且DROPDOWN 1,2和3中的第一个，第二个，第三个选择应保持禁用状态。

但问题是如果在步骤3中，启用了第一个选择，其中它被假定为禁用。由于我不是很擅长javascript，它让我头疼了将近5天，但仍然没有运气。希望任何人都可以帮助我解决我的问题。

$('select').change(function() {

    $(this)
        .siblings('select')
        .children('option[value=' + this.value + ']')
        .attr('disabled', true)
        .siblings().removeAttr('disabled');

});

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<label>DROPDOWN 1</label>
<select name="select1">
    <option>No Match</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select><br>
<label>DROPDOWN 2</label>
<select name="select2">
    <option>No Match</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select><br>
<label>DROPDOWN 3</label>
<select name="select3">
    <option>No Match</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select><br>
<label>DROPDOWN 4</label>
<select name="select4">
    <option>No Match</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

Answer 1

＆＃13;

$( document ).ready(function() {
$('select').on('change', function() {
    selected = [];

    $('select').each(function() {

        if ($(this).val() !== "No Match")

            selected.push($(this).find('option:selected').val());

    });
    console.log(selected);

    $('select').children().each(function(index) {

        if ($.inArray($(this).val(), selected) !== -1) {
            $(this).attr('disabled', true);

        } else {
            $(this).attr('disabled', false);
        }
    });
});
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>DROPDOWN 1</label>
<select name="select1">
    <option>No Match</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select><br>
<label>DROPDOWN 2</label>
<select name="select2">
    <option>No Match</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select><br>
<label>DROPDOWN 3</label>
<select name="select3">
    <option>No Match</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select><br>
<label>DROPDOWN 4</label>
<select name="select4">
    <option>No Match</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

＆＃13;

这是想法 - ＆gt;在每个下拉列表更改中，检查所有下拉列表，包括当前和（重新）创建所选选项的数组，然后遍历每个子项（选项），并相应地设置属性。

$('select').on('change', function() {
    selected = [];

    $('select').each(function() {

        if ($(this).val() !== "No Match")

            selected.push($(this).find('option:selected').val());

    });
    console.log(selected);

    $('select').children().each(function(index) {

        if ($.inArray($(this).val(), selected) !== -1) {
            $(this).attr('disabled', true);

        } else {
            $(this).attr('disabled', false);
        }
    });
});

演示：https://jsfiddle.net/g3t3v22o/

P.S。如果用户改变主意（虽然他可以做到，但仍有一些选项），则需要重新创建数组。在进程中查看console.log，以查看所选数组的更改方式......

非重复下拉选择

1 个答案: