Question

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

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

我该怎么做？

<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

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

$HOME

Answer 2

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

工作原理：

重置之前在其他dropdowns
禁用所有dropdowns上的选定选项，不包括当前下拉列表。

JQUERY CODE：

$(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根据以前选择的下拉列值禁用下拉选项？

2 个答案: