Question

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

但是，我无法弄清楚如何将值设置为禁用。 Opt.prop（＆＃34;禁用＆＃34;，＆＃34;禁用＆＃34;）无效。

<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，如果：{/ p>

此选项值不为空（o.value.length如果等于false将转换为0，否则转换为true
已选中（selected.includes(o.value)）
但不会在当前选择中选择：$(o).parent().val() !== o.value

Answer 2

您的条件

if (otherSelect.selectedIndex == opt) {

永远不会满足，因为你的for循环正在返回Option对象。您实质上是在询问选项对象是否为整数（selectedIndex返回一个整数）。

我将其改为：

if (otherSelect.value == opt.value) { 
  $(opt).prop("disabled", "disabled");
}

Answer 3

$(".equipment-listbox").change(function () {
    var item=$(this).val(), id=$(this).attr("id");
    $(".equipment-listbox:not(#" + id + ")").children().each(function() {
        if ($(this).val()===item) {
            $(this).prop("disabled", "true");
        } else {
            $(this).removeAttr("disabled");
        }
    });
});

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

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

3 个答案: