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

Question

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

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

我该怎么做？

<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);
});

这里是fiddlelinkhttps://jsfiddle.net/3pfo1d1f/4/

Answer 1

这样做：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
});

Answer 2

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

工作原理：

重置之前在其他 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

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

disable dropdown options based on the previously selected dropdown values using jquery or javascript?

html

javascript

jquery

disabled-input

drop-down-menu