html select option javascript

Question

I have this table and these options in it. I want to do that when I select Binary in the first select list, it will not be automatically selected in the second select list. Friend told me that it can be done in JavaScript but he and I don't know how.

To better understand: if I select an option with value 2 in the first selector, it will not be possible to select it in the second select

so if someone could help me, answer please

<tr>
  <td class="center"> 
    <select id="notationoption" name="notation_from">
      <option value="2">Binary</option>
      <option value="3">Ternary</option>
      <option value="4">Quaternary</option>
    </select>
  </td> 
</tr>
<tr>
  <td class="center"> 
    <select id="notationoption" name="notation_to">
    <option value="2">Binary</option>
    <option value="3">Ternary</option>
    <option value="4">Quaternary</option> 
    </select>
  </td> 
</tr>

Handle the "change event" of the first drop-down. Get the currently selected value. Loop through the options of the second drop-down until you find the one with the matching value. Mark it as disabled. Make sure all other options are enabled. That's the step by step guide...each step should be researchable to find examples of syntax. Does that help? — ADyson
– ADyson, Commented Jun 14, 2020 at 11:27
I'll never understand why people put answers in the comments ... — machineghost
– machineghost, Commented Jun 14, 2020 at 15:18
@machineghost IMO a full answer would need to involve some code, which I wasn't going to write while idly flicking through the site on my phone. So I thought some hints might be helpful. — ADyson
– ADyson, Commented Jun 14, 2020 at 19:10

Unmitigated · Accepted Answer · 2020-06-14 15:27:56Z

You can use the change event on the first select to disable the option with the same value in the second select. Also, you cannot have two elements with the same id, so you will need to give your second select a different id.

const select1 = document.getElementById("notationoption1");
const select2 = document.getElementById("notationoption2");
select1.addEventListener("change", e=>{
  const disabled = select2.querySelector("option[disabled]");
  if(disabled) disabled.disabled = false;
  select2.querySelector("option[value='"+ select1.value + "']").disabled = true;
});

<tr>
  <td class="center"> 
    <select id="notationoption1" name="notation_from">
      <option value="2">Binary</option>
      <option value="3">Ternary</option>
      <option value="4">Quaternary</option>
    </select>
  </td> 
</tr>
<tr>
  <td class="center"> 
    <select id="notationoption2" name="notation_to">
    <option value="2" disabled>Binary</option>
    <option value="3">Ternary</option>
    <option value="4">Quaternary</option> 
    </select>
  </td> 
</tr>

Collectives™ on Stack Overflow

html select option javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related