使用jquery或javascript根据先前选择的下拉列表禁用下拉列表选项？ [英] disable dropdown options based on the previously selected dropdown values using jquery or javascript?

问题描述

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

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

我该怎么做？

 < select class = form-control positionTypes> 
< option value =>选择一个< / 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 =>选择一个< / 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 =>选择一个< / 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 position（））。（（）（）{
 $（select.positionTypes option [value ='+ $（this）.data（'index'）+'] ，false）; 
 $（this）.data（'index'，this.value）; 
 $（select.positionTypes选项[value ='+ this.value +']：not （[value ='']））。prop（'disabled'，true）; 
}）; 
  

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

解决方案

如下所示： https://jsfiddle.net/sandenay/3pfo1d1f/7/ $（select.positionTypes选项[value]（$ {

pre $ ='+ $（this）.data（'index'）+']）。prop（'disabled'，false）; //每次更改其他更改
$（this）.data（'索引'，this.value）;
$（select.positionTypes选项[value ='+ this.value +']：not（[value ='']） ，true）;
$（this）.find（option [value ='+ this.value +']：not（[value ='']） ）; //不要将逻辑应用于当前的一个
}）;

I have three dropdowns with the same options. What i want is, when i selecte an option from a dropdown, the same option from the other two dropdowns to be disabled, except from the first one (the option 'Select One').

For this i am using the following logic, but here when one dropdown is selected to one value instead of disabling that selected value from the remaining two dropdowns, its disabling from the all of these three dropdowns this i don't want. The disabling of value should happen to the remaining ones but not for the current dropdown.

How can i do this?

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

here is the fiddle link https://jsfiddle.net/3pfo1d1f/4/

解决方案

Do it like this: 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
});

这篇关于使用jquery或javascript根据先前选择的下拉列表禁用下拉列表选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！