If An Option Is Selected In A Select List, How To Disable The Option With The Same Value In Another Select List

October 27, 2023 Post a Comment

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

Solution 1:

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

constvalidate = 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><selectid="tip_rola1"onchange="validate(event)"><optionselected=""> Select</option><optionvalue="8"> 70</option><optionvalue="9"> 76</option><optionvalue="10"> 80</option><optionvalue="11"> 84</option><optionvalue="12"> 35</option><optionvalue="13"> 38</option><optionvalue="14"> 40</option><optionvalue="15"> 42</option></select><span>select 2</span><selectid="tip_rola2"onchange="validate(event)"><optionselected=""> Select</option><optionvalue="8"> 70</option><optionvalue="9"> 76</option><optionvalue="10"> 80</option><optionvalue="11"> 84</option><optionvalue="12"> 35</option><optionvalue="13"> 38</option><optionvalue="14"> 40</option><optionvalue="15"> 42</option></select>

Solution 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 Selectconst 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><selectclass="form-control show_data1"id="tip_rola1"name="tip_rola2"><optionselected=""> Select</option><optionvalue="8"> 70</option><optionvalue="9"> 76</option><optionvalue="10"> 80</option><optionvalue="11"> 84</option><optionvalue="12"> 35</option><optionvalue="13"> 38</option><optionvalue="14"> 40</option><optionvalue="15"> 42</option></select><span>select 2</span><selectclass="form-control show_data2"id="tip_rola2"name="tip_rola2"><optionselected=""> Select</option><optionvalue="8"> 70</option><optionvalue="9"> 76</option><optionvalue="10"> 80</option><optionvalue="11"> 84</option><optionvalue="12"> 35</option><optionvalue="13"> 38</option><optionvalue="14"> 40</option><optionvalue="15"> 42</option></select>

Solution 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".

functionselectChangehandler(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><selectclass="form-control show_data1"id="tip_rola1"name="tip_rola1"><optionselected=""> Select</option><optionvalue="8"> 70</option><optionvalue="9"> 76</option><optionvalue="10"> 80</option><optionvalue="11"> 84</option><optionvalue="12"> 35</option><optionvalue="13"> 38</option><optionvalue="14"> 40</option><optionvalue="15"> 42</option></select><span>select 2</span><selectclass="form-control show_data2"id="tip_rola2"name="tip_rola2"><optionselected=""> Select</option><optionvalue="8"> 70</option><optionvalue="9"> 76</option><optionvalue="10"> 80</option><optionvalue="11"> 84</option><optionvalue="12"> 35</option><optionvalue="13"> 38</option><optionvalue="14"> 40</option><optionvalue="15"> 42</option></select>

javascript magazin