Question

I have 4 dropdowns and when 1 is selected, I want the other 3 to reset to the first option in the dropdown. I have the code below and it doesn’t work.

$(document).ready(function() {

            $('select').change(function() {

                var current = $(this).attr('id');

                $('select').each(function() {

                    if(!$(this).attr('id') == current) {
                        $('select option:eq(0)').attr('selected', true);
                    }
                });
            }); 
        });

    <h:selectOneMenu value="#{selectCategory.currentCategory}"
        valueChangeListener="#{selectCategory.valueChanged}" id="menu2">
        <f:selectItems value="#{selectCategory.national}" />
        <a4j:ajax event="valueChange" execute="@this"
            oncomplete="loadDataAndCreateChart()" />
    </h:selectOneMenu>

    <h:selectOneMenu value="#{selectCategory.currentCategory}"
        valueChangeListener="#{selectCategory.valueChanged}" id="menu3">
        <f:selectItems value="#{selectCategory.industry}" />
        <a4j:ajax event="valueChange" execute="@this"
            oncomplete="loadDataAndCreateChart()" />
    </h:selectOneMenu>

    <h:selectOneMenu value="#{selectCategory.currentCategory}"
        valueChangeListener="#{selectCategory.valueChanged}" id="menu4">
        <f:selectItems value="#{selectCategory.mayo}" />
        <a4j:ajax event="valueChange" execute="@this"
            oncomplete="loadDataAndCreateChart()" />
    </h:selectOneMenu>

equals to

<select id="menu1" name="menu1" size="1" onchange="RichFaces.ajax(this,event,{&quot;sourceId&quot;:&quot;menu1&quot;,&quot;parameters&quot;:{&quot;javax.faces.behavior.event&quot;:&quot;valueChange&quot;} } )">  <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3Grant</option>

    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select><select id="menu2" name="menu2" size="1" onchange="RichFaces.ajax(this,event,{&quot;sourceId&quot;:&quot;menu2&quot;,&quot;parameters&quot;:{&quot;javax.faces.behavior.event&quot;:&quot;valueChange&quot;} } )"> <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>

</select><select id="menu3" name="menu3" size="1" onchange="RichFaces.ajax(this,event,{&quot;sourceId&quot;:&quot;menu3&quot;,&quot;parameters&quot;:{&quot;javax.faces.behavior.event&quot;:&quot;valueChange&quot;} } )"> <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select><select id="menu4" name="menu4" size="1" onchange="RichFaces.ajax(this,event,{&quot;sourceId&quot;:&quot;menu4&quot;,&quot;parameters&quot;:{&quot;javax.faces.behavior.event&quot;:&quot;valueChange&quot;} } )"> <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>

</select>

Answer 1

My first thought is that something like the following should work (though it is, as yet, untested):

$(document).ready(
    function(){
        $('select').change(
            function(){
                $('select').not($(this)).find('option:first-child').attr('selected',true);
            })
     });

JS Fiddle demo.