Trying to reset all dropdowns except the one that was changed

问题

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>

回答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.

回答2:

Working example:

  $('select').change(function() {
            $('select').not(this).children('option:first-child').prop('selected',true);
  });

Make sure to use prop() if you have jQuery >=1.6, else stick with attr('selected',true)

http://jsfiddle.net/niklasvh/dDXA6/

回答3:

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

did you mean

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

回答4:

Tomalak's probably on the right track with your option statement, but try combining it with a .not()

$(document).ready(function() {
    $('select').change(function() {
        $('select').not($(this)).each(function() {
            $('option:eq(0)',this).attr('selected', true);
        });
    }); 
});

it doesnt change your conditional statement, but it cuts out a lot of code.

来源：https://stackoverflow.com/questions/6297836/trying-to-reset-all-dropdowns-except-the-one-that-was-changed

标签

jquery