if an option is selected in a select list, how to disable the option with the same value in another select list

Question

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>

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.

Answer 1

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>

Answer 2

Answer:

• HTMLSelectElement already contains an HTMLCollection of option elements for each box. This is accessible through HTMLSelectElement.options. You don't need to make a separate query to get these elements.

• Keep in mind that options returns an HTMLCollection and not an Array, it doesn't come with Array methods like forEach, but it is still iterable by utilizing a for loop.

• HTMLSelectElement also has a selectedIndex property that denotes which option has been selected. This allows us to get the currently selected option like so: HTMLSelectElement.options[ HTMLSelectElement.selectedIndex ].

---

Your change event listener can be adjusted as follows to get the desired effect:

// Get selected value of first Select
  const selected = s.options[s.selectedIndex].value;

// Adjust second Select options 
  for (let opt of s2.options) {
    opt.disabled = opt.value === selected;
  }

Example:

let [s, s2] = document.querySelectorAll("select");

s.addEventListener("change", function() {
  const selected = s.options[s.selectedIndex].value;
  for (let opt of s2.options) {
    opt.disabled = opt.value === selected;
  }
});

<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>

Answer 3

You didn't show any effort of your own, but given that you're new-ish and the solution is quite simple, here's a snippet demonstrating the desired behaviour. Whenever one of the selects changes, loop over the options in the other one and set their disabled attributes, either to true if it has the same value as selected in the changed select, otherwise to false.

By the way, your first select with id="tip_rola1" should also have the name attribute set to "tip_rola1" instead of "tip_rola2".

function selectChangehandler(event) {
  let thisSelect = event.target;
  let otherSelect = document.getElementById(`tip_rola${thisSelect.id === 'tip_rola1' ? 2 : 1}`);
  otherSelect.querySelectorAll('option').forEach(function(option) {
    option.disabled = option.value === thisSelect.value;
  });
}

document.getElementById('tip_rola1').addEventListener('change', selectChangehandler);
document.getElementById('tip_rola2').addEventListener('change', selectChangehandler);

<span>select 1</span>
<select class="form-control show_data1" id="tip_rola1" name="tip_rola1">
   <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>