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


134

我有两个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")时,需要将第二个重置selectselect all;同样,当我选择第二个选项select(即id="name2")时,需要将第一个重置selectselect all

我怎样才能做到这一点?


我将标题从[...]重置为[...],[第一个选项]设置为[...],因为重置意味着设置默认的初始加载值
Pierre de LESPINAY,2016年

Answers:


277

这样的事情应该可以解决问题:https//jsfiddle.net/TmJCE/898/

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


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

15
是的,但是它仍然显示了基本概念,在这种情况下,他似乎想将其重置为“全选”,这是第一个选项。
杰克

2
如果从<button>元素中使用此元素,请确保不要设置type="reset"。直到我将类型设置为button
Caumons,2013年

3
我确实选择了下拉菜单的第一个元素,但文本仍然是旧的。
VaTo

我将其用作其余的选择框,可以吗?还是我没有正确地得到它?
ankit suthar

1
@ankitsuthar会将的选定选项更改为select提供的值。select.prop('selectedIndex', 0)将其重置为第一个选项,select.prop('selectedIndex', 1)将其设置为第二个选项。
杰克

44

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

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

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

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

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


是的,这几乎可以一直工作。其他解决方案有时可能会出现问题。确实是最简单的方法。
Sworup Shakya

5
只是警告:仅当您确实要选择第一个选项并且第一个选项的值集为空白时,这才起作用。如果您的第一个选项具有其他值,或者“选择”框中没有选项具有空白值,那么这不会影响任何更改。或者,如果某个其他选项的值为空白,它将选择该选项。
HBlackorby 2015年

@HBlackorby,您的评论很有帮助,但1)选项with value=""可以按任何顺序出现。2)没有值属性<option></option>的选项,即与具有空字符串值属性的选项,即,是不相同的<option value=""></option>,并且您已经清楚地表明我们需要value="" 部分 3)即使没有<option>带空字符串值的选项;设置.val('')将“影响更改”,选择将显示为空白,不是吗?至少在我的Chrome浏览器中……
红豆豆

21

正如@PierredeLESPINAY在评论中指出的那样,我原来的解决方案是不正确的-它将下拉列表重置为最上面的选项,但这仅是因为undefined返回值解析为索引0。

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

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

演示:http://jsfiddle.net/weg82/257/


原始答案-不正确

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

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

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

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

Jens Roland所说的,反之亦然^^ jsfiddle.net/weg82/2
zynaps 2011年

但是反之亦然,这没有任何意义-这相当于一个很大的下拉列表。我不明白
詹斯·罗兰

只需编写就够了$('#name2').val( $(this).prop('defaultSelected') );
vsync

@vsync:$(this)指的是$('#name'),不是$('#name2'),所以没有
延斯·罗兰

1
defaultSelected<option>财产,将永远undefined<select>
Pierre de LESPINAY(

7

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

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


4

如果您只是想将其恢复到第一个选项,例如,“选择一个选项”“ Select_id_wrap”显然是围绕select的div,那么这就是我的工作方式,但是我只是想弄清楚这一点,以防万一有关其工作原理的任何信息。我的重置为单击功能,但我确定它也可以在更改时使用...

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


3

也可以使用

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

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

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

1

以下是使用随机选项元素定义为默认值(在这种情况下,文本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>

0

您可以尝试以下方法:

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

0

我在jQuery v1.9.1中@Jens Roland的答案中使用defaultSelected属性时遇到问题。一种更通用的方式(具有许多从属选择)是将data-default属性放入从属选择中,然后在重置时对其进行迭代。

<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

使用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

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

<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

这是即时通讯使用的最佳解决方案。这将适用于超过1个slectbox

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


0

可以通过此段完成在select元素中设置选项1的操作。为了直观地显示它,您必须在最后添加.trigger('change')。

$('#name').removeAttr('selected').find('option:first').attr('selected', 'selected').trigger("change");
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.