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

在我的创建表单上，我有3个选择列表，它们都具有相同的值。但是，不能为多个select选择相同的选项。所以，如果我在第一个选项中选择选项一。。那么我就不能在另外两个选项中选择这个选项了

我几乎做到了，但我遇到了一个问题，如果我选择了一个选项，那么禁用对其他两个选项有效，但一旦我为第二个选择了一个选项，那么我在第一个选择中选择的选项对于第三个选择中的选项再次变为活动

以下是我所拥有的：

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>

---

我要展示一个工作示例。

您的问题是这一行：

    $(".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");

           }

        }

    }

});

//获取更改时选择的人员的值
$（“.person select”）.change（函数（）{
//选择所有下拉列表
var all_selects=$（“.person select”）；
$（“.person select option”）.prop（“disabled”，false）；//全部激活，但下一步我们将重新发现相应的。
//递归。查看每个下拉列表，然后与存在的所有下拉列表进行比较。
对于（变量x=0；x

为您的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;
    }

});

});

---

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

const selectBoxes=document.querySelectorAll（'select.person select'）
让我们选择=[]
const_disableRelated=（）=>{
常量选项=[]
选择框
.forEach（选择=>{
const unselectedOpts=[…select.querySelectorAll（'option'）].filter（o=>o.value！==select.value）
选项。推送（…未选择的选项）
})
options.forEach（option=>{
const action=selected.indexOf（option.value）！=-1？'setAttribute'：'removeAttribute'
选项[操作]（'disabled'，null）
})
}
常数_handleChange=e=>{
常量{value}=e.target
所选长度=0
selectbox.forEach（（{value}）=>value？selected.push（value）：null）
_禁用相关（）
}
selectbox.forEach（select=>select.addEventListener（'change'，_handleChange））

--选择一个人--
无名氏
无名氏
贝比鲁斯
威廉斯
皮特·罗斯
--选择第二个人--
无名氏
无名氏
贝比鲁斯
威廉斯
皮特·罗斯
--选择第三个人--
无名氏
无名氏
贝比鲁斯
威廉斯
皮特·罗斯

因此，除了保存该值的选择框外，您想禁用所有潜在选择框上已选择的任何值吗？@FrancisLeigh Correct。如果我选了约翰·多伊。。那么我就不能在《选择二号或三号》中选择约翰·多伊，反之亦然。好吧，可能还有另一个问题。第一个选择选项是必需的，表单没有提交，因为他们选择的值被禁用。明白了。编辑我的回复。应该是一个简单的解决方案。如果你想回答的话，就发一个问题。我建议删除一个额外的问题。大多数Stackoverflow版主无论如何都会尝试关闭它。但我在上面添加了修复。请注意“continue”语句。这将防止具有选定值的下拉列表在同一下拉列表中禁用该选项。我在我的。它部分地起作用了。即使第二次和第三次选择不是必需的，它们也将被使用，并且需要与表格一起提交。而且，如果我在第一个选项中选择“John Doe”，我仍然可以在第二个选项中选择他

$(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;
    }

});

});