如何使用jQuery在select框中设置第一个选项？
我有两个HTML select框。 我需要重置一个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第一个select （即id="name" ）的选项，我需要重置第二select all ; 同样，当我select第二个select选项（即id="name2" ），我需要重置第一个select all 。
我怎样才能做到这一点？
像这样的事情应该做的伎俩： https : //jsfiddle.net/TmJCE/898/
$('#name2').change(function(){ $('#name').prop('selectedIndex',0); }); $('#name').change(function(){ $('#name2').prop('selectedIndex',0); });
如果您只想将select元素重置到第一个位置，最简单的方法可能是：
$('#name2').val('');
重置文档中的所有select元素：
$('select').val('')
编辑：按照下面的注释澄清，这将重置select元素到其第一个空白条目，并且只有在列表中存在一个空白条目。
正如@PierredeLESPINAY在注释中指出的那样，我的原始解决scheme是不正确的 – 它会将下拉菜单重置为最上面的选项，但这只是因为undefined返回值parsing为索引0。
这是一个正确的解决scheme，它将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方法来获取默认select：
// Resets the name2 dropdown to its default value $('#name2').val( $('#name2').prop('defaultSelected') );
要使其在第一个下拉列表更改时dynamic重置，请使用.change事件：
$('#name').change(function(){ $('#name2').val( $('#name2').prop('defaultSelected') ); });
如果要将select重置为具有“选定”属性的选项，请使用此选项。 与select的form.reset（）内置的javascript函数类似。
$("#name").val($("#name option[selected]").val());
这帮助我很多。
$(yourSelector).find('select option:eq(0)').prop('selected', true);
使用下面的代码。 看到它在这里工作http://jsfiddle.net/usmanhalalit/3HPz4/
$(function(){ $('#name').change(function(){ $('#name2 option[value=""]').attr('selected','selected'); }); $('#name2').change(function(){ $('#name option[value=""]').attr('selected','selected'); }); });
这也可以使用
$('#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_id_wrap”显然是围绕select的div，但我只是想明确，以防万一关于如何工作的任何方面。 我的重置为点击function，但我相信它会在更改内工作…
$("#select_id_wrap").find("select option").prop("selected", false);
这是重置表单中所有select框的最灵活/可重用的方法。
var $form = $('form') // Replace with your form selector $('select', $form).each(function() { $(this).val($(this).prop('defaultSelected')); });
以下是如何使用定义为默认值的随机选项元素来处理它（在这种情况下，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>
你可以试试这个：
$( 'select' ).each( function () { if ( $( this ).children().length > 0 ) { $( $( this ).children()[0] ).attr( 'selected', 'selected' ); $( this ).change(); } } );
在jQuery v1.9.1的@Jens Roland的回答中，我使用了defaultSelected属性。 一个更通用的方法（有许多相关的select）将是在你的依赖select中放置一个数据默认属性，然后在重置时迭代它们。
<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() ); } });
我在select标签中创build了一个新的选项，其值为空string（“”），并用于：
$("form.query").find('select#topic').val("");
使用jQuery的绑定onchange事件来select，但你不需要创build另一个$(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字段重置为默认选项，其中所选属性已定义。
<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>
这是我使用的最好的解决scheme。 这将适用于超过1个select器
$("select").change(function(){ var thisval = $(this).val(); $("select").prop('selectedIndex',0); $(this).val(thisval); })
很简单：
$('#DropdownToRestId').find('option:selected').val('');
