Question

我有4个下拉菜单，当选择1时，我希望其他3个重置为下拉列表中的第一个选项。我有下面的代码，它不起作用。

$(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>

等于

<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

工作示例：

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

如果你有jQuery＆gt; = 1.6，请确保使用prop()，否则坚持使用attr（'selected'，true）

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

Answer 2

通过

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

你是说

吗？

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

Answer 3

我的第一个想法是，类似下面的应该工作（尽管它尚未经过测试）：

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

JS Fiddle demo

Answer 4

Tomalak可能在您的选项声明的正确轨道上，但尝试将其与.not()

结合使用

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

它不会改变您的条件语句，但会删除大量代码。

尝试重置除已更改的下拉列表之外的所有下拉列表

4 个答案: