Question

All,
I have the following select box:

<select class="event_selection" name="Event[]" id="Event_<?php echo $i; ?>" > 
    <option value="original">Select Event...</option> 
    <option value="1">One</option> 
    <option value="2">Two</option>
</select>

I have a couple of these on my form. When a user selects a value from the drop down I’d like to make sure that the value isn’t already selected on another select that has the same class.

Is there an easy way to do this? If so, can you please point me in the right direction?

Thanks!

Answer 1

I’ve made it so that you cannot select any value twice:

var $coll = $( '.event_selection' ).on( 'change', function () {
    $coll.children().prop( 'disabled', false );
    $coll.each(function () {
        var val = this.value;
        if ( val === 'original' ) return;
        $coll.not( this ).children( '[value="' + val + '"]' ).prop( 'disabled', true );
    });
});

Live demo: http://jsfiddle.net/QVbQ6/2/

---

var $coll = $( '.event_selection' );

$( '#timeline_table' ).on( 'change', '.event_selection', function () {

    // my code
    $coll.children().prop( 'disabled', false );
    $coll.each(function () {
        var val = this.value;
        if ( val === 'original' ) return;
        $coll.not( this ).children( '[value="' + val + '"]' ).prop( 'disabled', true );
    });

    // your other code...

});