javascript - 多选列表 - 禁用已选择的项目

Question

我有 2 个或更多具有相同选项的选择列表。一旦在其中一个选择列表中选择了一个项目，我不希望用户能够在另一个选择列表中选择它。

但是，我不知道如何将值设置为禁用。 Opt.prop("disabled","disabled") 不工作。

<select id="select1" class="equipment-listbox">
    <option value="">-- Select Tool --></option>
    <option value="Drill">Drill<option>
    <option value="Scalpel">Scalpel<option>
    <option value="Syringe">Syringe<option>
    <option value="Calipers">Calipers<option>
    <option value="Chisel">Chisel<option>
</select>

<select id="select2" class="equipment-listbox">
    <option value="">-- Select Tool --></option>
    <option value="Drill">Drill<option>
    <option value="Scalpel">Scalpel<option>
    <option value="Syringe">Syringe<option>
    <option value="Calipers">Calipers<option>
    <option value="Chisel">Chisel<option>
</select>

$(".equipment-listbox").click(function () {
    var thisSelect = document.getElementById(this.id);

    $(".equipment-listbox").each(function (e, val) {
        var otherSelect = document.getElementById(val.id);
        if (thisSelect.id != otherSelect.id) {

            for (var opt in thisSelect.options) {

                if (otherSelect.selectedIndex == opt) { --if otherSelect has a value in thisSelect...set to disabled
                    //console.log("setting option to disabled");
                    opt.prop("disabled", "disabled");
                }

            }

        }

    });

});

Answer 1

对于每个选择，您需要禁用所有选择的选项，但它自己选择的选项。检查这个例子。

let selects = $(".equipment-listbox");

selects.change(function() {
    // getting all selected values
    let selected = selects.map((i, s) => s.value).get();
    selects.find("option").each(function(i, o) {
        // disable option if it is selected in other selects
        // (you can set the 'disabled' propery to true or false)
        $(o).prop("disabled", o.value.length &&                 //enable empty values
                              selected.includes(o.value) &&
                              $(o).parent().val() !== o.value);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1" class="equipment-listbox">
    <option value="">-- Select Tool --></option>
    <option value="Drill">Drill<option>
    <option value="Scalpel">Scalpel<option>
    <option value="Syringe">Syringe<option>
    <option value="Calipers">Calipers<option>
    <option value="Chisel">Chisel<option>
</select>

<select id="select2" class="equipment-listbox">
    <option value="">-- Select Tool --></option>
    <option value="Drill">Drill<option>
    <option value="Scalpel">Scalpel<option>
    <option value="Syringe">Syringe<option>
    <option value="Calipers">Calipers<option>
    <option value="Chisel">Chisel<option>
</select>

<select id="select2" class="equipment-listbox">
    <option value="">-- Select Tool --></option>
    <option value="Drill">Drill<option>
    <option value="Scalpel">Scalpel<option>
    <option value="Syringe">Syringe<option>
    <option value="Calipers">Calipers<option>
    <option value="Chisel">Chisel<option>
</select>

一点解释:

当每个选择更改其值时，我们执行以下操作:

1) selects.map((i, s) => s.value).get() - 获取所有选择的值并将它们收集到一个数组中。2) selects.find("option").each(function(i, o) - 对于每个选择中的每个选项，我们将 disabled 设置为 true 如果:

• 此选项值不为空(o.value.length 如果等于 0 将被转换为 false否则为 true)

• 并且它已经被选中 (selected.includes(o.value))

• 但它不在当前选择中被选中:$(o).parent().val() !== o.value