jrchristensen Posted February 13, 2020 Share Posted February 13, 2020 i am teaching my self how to write code. for part of my project i will be using drop down menus but i am stuck. say you have 5 options and 2 actual drop down selectors (A and B). in A you select #3. my question is how, do you make it so #3 can not be selected for B? <!DOCTYPE html> <html> <body> <label for="option">Choose 2:</label> <select id="cars"> <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> <select id="cars"> <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> </body> </html> Link to comment Share on other sites More sharing options...
KhushbuJ Posted February 19, 2020 Share Posted February 19, 2020 First of all, Both select tags must have unique ids. In question, you are using same id "cars". which won't work. So say for example, second select tag has id "cars2". In that case, you can disable option chosen in first select tag from second select tag as below: $("#cars").change(function(){ $('#cars2 option').removeAttr("disabled"); $('#cars2 option[value="'+$(this).val()+'"]').attr("disabled", true); }); You should not remove option from select tag, as we can't get it back once removed. So we are using disable method. Link to comment Share on other sites More sharing options...
shaili_shah Posted February 20, 2020 Share Posted February 20, 2020 (edited) <label for="option">Choose 2:</label> <select id="cars" onchange="select()"> <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> </select> <select id="cars1"> <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> </select> <script> function select() { var sel = document.getElementById("cars").value; var x = document.getElementById("cars1").options[sel-1].disabled = true; } </script> Here I have take [sel-1] because it's starting index is 0. I hope this will help you. Edited February 20, 2020 by shaili_shah Link to comment Share on other sites More sharing options...
JMRKER Posted February 22, 2020 Share Posted February 22, 2020 (edited) Needs following change to make it work. <script> function select() { var sel = document.getElementById("cars").value; document.getElementById("cars1").options[sel-1].disabled = true; } </script> Note also that it will ONLY disable the selection without the ability to deselect a choice once chosen. Also, the label tag 'for=option' is useless as the 'for' applies to an ID not an 'option' to the select tag. Edited February 22, 2020 by JMRKER Link to comment Share on other sites More sharing options...
dsonesuk Posted February 22, 2020 Share Posted February 22, 2020 If want to compare values, compare values, not index which could be unrelated to value chosen <!DOCTYPE html> <html> <body> <label for="cars">Choose 2:</label> <select id="cars"> <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> </select> <select id="cars2"> <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> </select> <script> var drp0 = document.getElementById("cars"); drp0.onchange=function(){ var drp1 = document.getElementById("cars2"); for(i=0; i<drp1.length; i++){ optionElem = drp1.options[i] if(this.value == optionElem.value){ optionElem.disabled=true; } } } </script> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now