Question

I have multiple Select statements on my page and the options are all the same, basically a ranking system as shown below. What I am trying to do is highlight each option in all the select statements once it has been select. i.e. If you pick “1” in the first Select, it will be highlighted in all the Select statements.

I thought I was pretty close with the code below but it only seems to work the first time I make a selection. The end result once all the options have been used would be that all the options are highlighted with the grey background.

I am using jQuery 1.5.

.pick { background-color: #CCC; }

<table>
    <tr>
        <td>Drop down 1</td>
        <td><select id="dd1" name="dd1">
                <option value=""></option>
                <option value="1"> 1 </option>
                <option value="2"> 2 </option>
                <option value="3"> 3 </option>
                <option value="4"> 4 </option>
                <option value="5"> 5 </option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Drop down 2</td>
        <td><select id="dd2" name="dd2">
                <option value=""></option>
                <option value="1"> 1 </option>
                <option value="2"> 2 </option>
                <option value="3"> 3 </option>
                <option value="4"> 4 </option>
                <option value="5"> 5 </option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Drop down 3</td>
        <td><select id="dd3" name="dd3">
                <option value=""></option>
                <option value="1"> 1 </option>
                <option value="2"> 2 </option>
                <option value="3"> 3 </option>
                <option value="4"> 4 </option>
                <option value="5"> 5 </option>
            </select>
        </td>
    </tr>
</table>

<script type="text/javascript">
    $(document).ready(function () {
        $("select[name*='dd']").change(onSelectChangeDD);
    });

    function onSelectChangeDD() {
        var selected = $("select[name*='dd'] option:selected");
        var test = $(this).val();

        $("select[name*='dd']").children().each(function () {
            // remove all the highlights
            $(this).removeClass("pick");
        });

        $("select[name*='dd']").children().each(function () {

            // highlight the selections
            if ($(this).val() == test) {
                $(this).addClass('pick');
            }
        });

    }
</script>

Answer 1

The end result once all the options
have been used would be that all the
options are highlighted with the grey
background.

In that case, you should remove the code that unpicks all items:

$("select[name*='dd']").children().each(function () {
    // remove all the highlights
    $(this).removeClass("pick");
});

and replace it with code that unpicks only unselected items:

$("select[name*='dd']").children().each(function () {
    // remove unused highlights
    if ($("select[name*='dd'] option:selected")
        .filter("[value='" + $(this).attr('value') + "']")
        .length === 0) {
        $(this).removeClass("pick");
    }
});

Link to jsfiddle code.