Question

I have 3 select boxes, all populated with the same data. Using jquery I would like to either a) disable the same options or b) remove the same options from the other two select boxes. I have posted the html below. You will notice I already have some headers within the select disabled, and those need to stay that way. This needs to work no matter which select box the user starts with. So if select three option 2 is picked, select 1 and 2 are disabled.

The jquery has been eluding me for hours.

edit: I forgot to add a couple things. If you change your selection, I need it to enable the previously selected option. Also, I would like the first choice ( — ) in each of the lists to always be available.

<fieldset class="fields1">
        <dl>
            <dt><label for="char_cs">test:</label></dt>
            <dd>
                <select id="char_cs1" name="char_cs1" class="char_cs">
                    <option value="">--</option>
                    <option disabled="disabled">header 1</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    <option disabled="disabled">header 2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    <option disabled="disabled">header 3</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                </select>
            </dd>
        </dl>
        <dl>
            <dd>
                <select id="char_cs2" name="char_cs2" class="char_cs">
                    <option value="">--</option>
                    <option disabled="disabled">header 1</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    <option disabled="disabled">header 2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    <option disabled="disabled">header 3</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                </select>
            </dd>
        </dl>
        <dl>
            <dd>
                <select id="char_cs3" name="char_cs3" class="char_cs">
                    <option value="">--</option>
                    <option disabled="disabled">header 1</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    <option disabled="disabled">header 2</option>
                        <option value="3">3</option>
                            <option value="4">4</option>
                    <option disabled="disabled">header 3</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                </select>
            </dd>
        </dl>
        </fieldset>

Answer 1

Try this:

$('.char_cs').change(function() {
    var ary = new Array();
    $('.char_cs option:selected').each(function() {
        if ($(this).val().length > 0) {
            ary.push($(this).val());
        }
    });
    $('.char_cs option').each(function() {
        if ($(this).val().indexOf('header')!=0) {
            if ($.inArray($(this).val(), ary) > -1) {
                $(this).attr('disabled', 'disabled');
            } else {
                $(this).removeAttr('disabled');
            }
        }
    });
});​

jsFiddle example.