Jump to content
jrchristensen

dropdown selection elimination

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>

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...