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
EmoticonEmoticon