根据先前使用 jquery 或 javascript 选择的下拉值禁用下拉选项？

Question

我有三个具有相同选项的下拉菜单。我想要的是，当我从下拉列表中选择一个选项时，其他两个下拉列表中的相同选项将被禁用，除了第一个（选项“选择一个”）。

为此，我使用以下逻辑，但在这里，当一个下拉列表被选择为一个值而不是从其余两个下拉列表中禁用该选定值时，它会从所有这三个下拉列表中禁用，这是我不想要的。值的禁用应该发生在其余的值上，但不会发生在当前的下拉列表中。

我该怎么做？

<select class="form-control positionTypes">
    <option value="">Select One</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>

<select class="form-control positionTypes">
    <option value="">Select One</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>

<select class="form-control positionTypes">
    <option value="">Select One</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>

$("select.positionTypes").change(function () {
    $("select.positionTypes option[value='" + $(this).data('index') + "']").prop('disabled', false);
    $(this).data('index', this.value);
    $("select.positionTypes option[value='" + this.value + "']:not([value=''])").prop('disabled', true);
});

这里是小提琴链接https://jsfiddle.net/3pfo1d1f/4/

Answer 1

有一种简单的方法可以做到这一点。您可以通过简单的逻辑实现相同的目标，即使对于初学者来说也很容易理解。

工作原理：

• 重置之前在其他dropdowns 上所做的所有选择
• 禁用所有dropdowns 上的选定选项，当前下拉列表除外。

JQUERY 代码：

$(function () {
    $(".positionTypes").on('change', function () {
        var selectedValue = $(this).val();
        var otherDropdowns = $('.positionTypes').not(this);
        otherDropdowns.find('option').prop('disabled', false); //reset all previous selection
        otherDropdowns.find('option[value=' + selectedValue + ']').prop('disabled', true);
    });
});

Live Demo @ JSFiddle

Answer 2

这样做：https://jsfiddle.net/sandenay/3pfo1d1f/7/

$("select.positionTypes").change(function () {
    $("select.positionTypes option[value='" + $(this).data('index') + "']").prop('disabled', false); //reset others on change everytime
    $(this).data('index', this.value);
    $("select.positionTypes option[value='" + this.value + "']:not([value=''])").prop('disabled', true);
    $(this).find("option[value='" + this.value + "']:not([value=''])").prop('disabled', false); // Do not apply the logic to the current one
});