如果在选择列表中选择了一个选项，如何在另一个选择列表中禁用具有相同值的选项 [英] if an option is selected in a select list, how to disable the option with the same value in another select list

问题描述

我有2个选择输入，如果我从第一个输入和第二个选择的输入具有相同的值，请从第二个输入中禁用，仅选择该选项以阻止用户选择2个相同的值. 这是我的html:

i have 2 select inputs where if i select from first one and second one have same values disable from second input select just that option to block user to select 2 same values. here is my html:

    $(document).ready(function(){
      $('#tip_rola1').change(function(){
        var tip_rola1 = $(this).val();

      $('#tip_rola2').change(function(){
        var tip_rola2 = $(this).val();
        var n1 = tip_rola1;
        if(tip_rola1 === tip_rola2) {
          alert(tip_rola2);
         
        }

      })
        

      })

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>select 1</span>
<select class="form-control show_data1" id="tip_rola1" name="tip_rola2">
   <option selected=""> Select</option>
   <option value="8"> 70</option>
   <option value="9"> 76</option>
   <option value="10"> 80</option>
   <option value="11"> 84</option>
   <option value="12"> 35</option>
   <option value="13"> 38</option>
   <option value="14"> 40</option>
   <option value="15"> 42</option>
</select>
<span>select 2</span>
<select class="form-control show_data2" id="tip_rola2" name="tip_rola2">
   <option selected=""> Select</option>
   <option value="8"> 70</option>
   <option value="9"> 76</option>
   <option value="10"> 80</option>
   <option value="11"> 84</option>
   <option value="12"> 35</option>
   <option value="13"> 38</option>
   <option value="14"> 40</option>
   <option value="15"> 42</option>
</select>

如果更改时的选择1与选择2的选择2具有相同的值，我想禁用在第一个选择选项中选择的选项.

If select 1 on change have same values with select 2 on select 2 i want to disable that option which was selected on first select option.

更新了几个人认为我没有尝试任何东西而我只是问的人.

Update for few ppl who think i didnt try anything and i just asking.

推荐答案

您可以添加function并将event作为参数发送，如下所示:

Hi you could add a function and send the event as an argument like so:

const validate = event => {       

    const id = event.target.id;      
    const dropdowns = ['tip_rola1','tip_rola2'];
    const secondDropdownId = dropdowns.filter(x => x !== id)[0];
    
    const secondDropdown = document.getElementById(secondDropdownId); 
    const dropdownSelected = document.getElementById(id);    
    
    if(event.target.value === secondDropdown.value){
      secondDropdown.setAttribute('disabled','');
      dropdownSelected.setAttribute('disabled', '');     
    }
    else {      
      dropdownSelected.removeAttribute('disabled'); 
      secondDropdown.removeAttribute('disabled'); 
    }    
}

<span>select 1</span>
<select id="tip_rola1" onchange="validate(event)">
   <option selected=""> Select</option>
   <option value="8"> 70</option>
   <option value="9"> 76</option>
   <option value="10"> 80</option>
   <option value="11"> 84</option>
   <option value="12"> 35</option>
   <option value="13"> 38</option>
   <option value="14"> 40</option>
   <option value="15"> 42</option>
</select>
<span>select 2</span>
<select id="tip_rola2" onchange="validate(event)">
   <option selected=""> Select</option>
   <option value="8"> 70</option>
   <option value="9"> 76</option>
   <option value="10"> 80</option>
   <option value="11"> 84</option>
   <option value="12"> 35</option>
   <option value="13"> 38</option>
   <option value="14"> 40</option>
   <option value="15"> 42</option>
</select>

这篇关于如果在选择列表中选择了一个选项，如何在另一个选择列表中禁用具有相同值的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！