it-swarm.cn

如何使用jQuery在选择框上设置第一个选项?

我有两个HTML select框。当我在另一个选项中进行选择时,我需要重置一个select框。

<select id="name" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

当我选择第一个select的选项(即id="name")时,我需要将第二个select重置为select all;类似地,当我选择第二个select的选项(即id="name2")时,我需要将第一个select重置为select all

我怎样才能做到这一点?

130
Anish

像这样的东西可以做到这一点: https://jsfiddle.net/TmJCE/898/

$('#name2').change(function(){
    $('#name').prop('selectedIndex',0);
});


$('#name').change(function(){
    $('#name2').prop('selectedIndex',0);
});
263
Jack

如果您只想将select元素重置为它的第一个位置,最简单的方法可能是:

$('#name2').val('');

要重置文档中的所有选择元素:

$('select').val('')

编辑:要根据下面的注释澄清,这会将select元素重置为其第一个空白条目,并且仅当列表中存在空白条目时才会重置。

44
AndreasT

正如@PierredeLESPINAY在评论中指出的那样,我的原始解决方案是错误的 - 它会将下拉列表重置为最顶层的选项,但仅仅因为undefined返回值已解析为索引0。

这是一个正确的解决方案,它考虑了selected属性:

$('#name').change(function(){
    $('#name2').val(function () {
        return $(this).find('option').filter(function () {
            return $(this).prop('defaultSelected');
        }).val();
    });
});

_ demo _ :http://jsfiddle.net/weg82/257/


原始答案 - INCORRECT

在jQuery 1.6+中,您需要使用 .prop 方法来获取默认选择:

// Resets the name2 dropdown to its default value
$('#name2').val( $('#name2').prop('defaultSelected') );

要在第一个下拉列表更改时动态重置,请使用 .change event:

$('#name').change(function(){
  $('#name2').val( $('#name2').prop('defaultSelected') );
});
21
Jens Roland

如果要将select重置为具有“selected”属性的选项,请使用此选项。类似于form.reset()内置的javascript函数到select。

 $("#name").val($("#name option[selected]").val());
7
Sathesh

这对我有很大帮助。

$(yourSelector).find('select option:eq(0)').prop('selected', true);
4
Andrej BlackFlash

如果您只想将其恢复到第一个选项,例如我可以使用它。 “选择一个选项”“Select_id_wrap”显然是选择周围的div,但我只想清楚地说明它是否与它的工作原理有关。我重置为点击功能,但我相信它也会在变化中起作用......

$("#select_id_wrap").find("select option").prop("selected", false);
4
Ian

请使用以下代码。看到它在这里工作 http://jsfiddle.net/usmanhalalit/3HPz4/

 $(function(){
     $('#name').change(function(){
         $('#name2 option[value=""]').attr('selected','selected');
     });

     $('#name2').change(function(){
         $('#name option[value=""]').attr('selected','selected');
     });
 });
3
Usman

这是重置表单中所有选择框的最灵活/可重用的方法。

      var $form = $('form') // Replace with your form selector
      $('select', $form).each(function() {
        $(this).val($(this).prop('defaultSelected'));
      });
3
Nick Barrett

这也可以使用

$('#name2').change(function(){
    $('#name').val('');//You can set the first value of first one if that is not empty
});


$('#name').change(function(){
    $('#name2').val('');
});
3
Azam Alvi

以下是如何使用定义为默认值的随机选项元素来处理它(在本例中,文本2是默认值):

<select id="name2" >
   <option value="">select all</option>
   <option value="1">Text 1</option>
   <option value="2" selected="selected">Text 2</option>
   <option value="3">Text 3</option>
</select>
<script>
    $('#name2 option[selected]').prop('selected', true);
</script>
1
mightytightywty

我在select标签中创建了一个新选项,其值为空字符串(“”)并使用:

$("form.query").find('select#topic').val("");
0
Leye Odumuyiwa

我在jQuery v1.9.1的@Jens Roland的回答中使用defaultSelected属性时遇到了问题。更通用的方法(具有许多依赖选择)将在依赖选择中放置数据默认属性,然后在重置时迭代它们。

<select id="name0" >
    <option value="">reset</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name1" class="name" data-default="1">
    <option value="">select all</option>
    <option value="1" selected="true">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" class="name" data-default="2">
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2" selected="true">Text 2</option>
    <option value="3">Text 3</option>
</select>

和javascript ...

$('#name0').change(function(){
    if($('#name0').val() == '') {
        $('select.name').each(function(index){
          $(this).val($(this).data('default'))  
        })
    } else {
      $('select.name').val($('#name0').val() );
    }
});

请参阅 http://jsfiddle.net/8hvqN/ 了解上述的工作版本。

0
spyle

这是我使用的最佳解决方案。这将适用于超过1个选择框

$("select").change(function(){
    var thisval = $(this).val();
    $("select").prop('selectedIndex',0);
    $(this).val(thisval);
})
0
Anh

使用jquery绑定onchange事件进行选择,但不需要创建另一个$(this) jquery对象。

$('select[name=name2]').change(function(){
    if (this.value) {
        console.log('option value = ', this.value);
        console.log('option text  = ', this.options[this.selectedIndex].text);

        // Reset selected
        this.selectedIndex = this.defaultSelected;
    }
});
0
John Magnolia

你可以试试这个:

$( 'select' ).each( function () {
    if ( $( this ).children().length > 0 ) {
        $( $( this ).children()[0] ).attr( 'selected', 'selected' );
        $( this ).change();
    }
} );
0
Aki143S

使用此代码将所有选择字段重置为默认选项,其中定义了所选属性。

<select id="name1" >
    <option value="1">Text 1</option>
    <option value="2" selected="selected" >Default Text 2</option>
    <option value="3">Text 3</option>
</select>
<select id="name2" >
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3" selected="selected" >Default Text 3</option>
</select>
<script>
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
</script>
0
Sjoerd Linders