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

正如@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') );
});

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

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


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

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

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




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

你可以试试这个:

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

下面是如何使用定义为默认值的随机选项元素来处理它(在本例中，Text 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>

这对我很有帮助。

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

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

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

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

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

编辑: 为了按照下面的注释进行说明，这将选择元素重置为其第一个空白条目，并且仅当列表中存在空白条目时才重置。

在 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/。

这也可以使用

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




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

如果要将 select 重置为具有“ select”属性的选项，请使用此选项。工作原理类似于 select 的 form.set ()内置 javascript 函数。

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

如果你只是想让它回到你的第一个选项，这里是我如何让它工作的，例如“选择一个选项” “ Select _ id _ wra”显然是 Select 周围的 div，但是我只是想说明一下，以防它与这个工作原理有任何关系。我的重置为一个点击功能，但我确信它将工作内的一个改变以及..。

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

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

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

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

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

使用 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;
}
});

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

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

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

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

在 select 元素中设置选项1可以由这个段完成。为了直观地显示它，可以使用 tp add。触发器(’变化’)在结束。

$('#name').removeAttr('selected').find('option:first').attr('selected', 'selected').trigger("change");

$('#name').prop('selectedIndex', 0),
$('#name').attr('selected', 'selected'),
$('#name').find('select option:eq(0)').prop('selected', true),
$("#name option[value=none]")

所有这些选项只有在您添加。Change ()来更新您的下拉列表以显示第一个选项。