基于先前选择的下拉值使用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

做这样的：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