Jump to content

dropdown selection elimination


jrchristensen

Recommended Posts

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

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

<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 by shaili_shah
Link to comment
Share on other sites

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 by JMRKER
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...