Tutorial :HTML select field updating another



Question:

I'm trying to create a webpage to merge vendors in our database and have a page with two select fields like this:

<select name="vendor" id="vendor_select_from">      <option  value="Apple" id="id0">Apple</option>      <option  value="Vector Resources, Inc" id="id1">Vector Resources, Inc</option>      <option  value="Dell, Inc." id="id2">Dell, Inc.</option>      <option  value="Amazon.com" id="id3">Amazon.com</option>  </select>  

Basically, when you select an option in the first field, it should either be disabled or removed from the second field. I could workaround this by simply repopulating the list, but that seems to be massively overkill for what I'm trying to accomplish. That being said, I've yet to figure out a way to do it with javascript or jQuery.


Solution:1

In your second identical <select>, I changed the ID attributes to end with the number 2.

Then you can easily do something like this:

Try it out: http://jsfiddle.net/3cVqL/2/

$('#vendor_select_from').change(function() {      var selected = $(':selected', this)[0].id + 2;      $('#' + selected).attr('disabled','disabled')          .siblings().removeAttr('disabled');        var $select2 = $('#vendor_select_from2');      if(selected == $(':selected', $select2)[0].id) {          $select2.val('');      }  }).trigger('change');  

HTML

<select name="vendor" id="vendor_select_from">      <option  value="Apple" id="id0">Apple</option>      <option  value="Vector Resources, Inc" id="id1">Vector Resources, Inc</option>      <option  value="Dell, Inc." id="id2">Dell, Inc.</option>      <option  value="Amazon.com" id="id3">Amazon.com</option>  </select>    <select name="vendor" id="vendor_select_from2">      <option  value="Apple" id="id02">Apple</option>      <option  value="Vector Resources, Inc" id="id12">Vector Resources, Inc</option>      <option  value="Dell, Inc." id="id22">Dell, Inc.</option>      <option  value="Amazon.com" id="id32">Amazon.com</option>  </select>  

Update: Changed it to clear the second <select> if the two match.

Update: Cleaned things up a bit.


Solution:2

$(document).ready( function() {      $("#vendor_select_from").change(      function(){          // ...Do something with $(this).val()          $(this).find("option[value='"+$(this).val()+"']").remove(); // This will remove the selected option from the select widget      });​​​​​​​​​​​​​​​​  });  


Solution:3

$('select[id=select1]').change(function()  {      $('select[id=select2] option').attr('disabled', false);      $('select[id=select2').find("option[value=$('select[id=select1]').val()]").attr('disabled', true);  });  

Note: No validation. you might want to add validation like if the element exists or not.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »