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.

Answer 1

$(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
    });​​​​​​​​​​​​​​​​
});

Answer 2

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.

Answer 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.