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

IT技术 javascript jquery
2021-03-12 10:40:17

我有两个 HTMLselect框。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。

我怎样才能做到这一点？

6个回答

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

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


$('#name').change(function(){
    $('#name2').prop('selectedIndex',0);
});
没错，但它仍然显示了基本概念，在这种情况下，他似乎想将其重置为“全选”，这是第一个选项。
2021-04-18 10:40:17
我用它作为选择框的其余部分可以吗？还是我没有正确理解？
2021-04-21 10:40:17
@ankitsuthar 它将选择的选项更改为select提供的值。select.prop('selectedIndex', 0)将其重置为第一个选项，select.prop('selectedIndex', 1)将其设置为第二个选项。
2021-04-26 10:40:17
我确实选择了下拉列表的第一个元素，但文本仍然是旧的。
2021-05-02 10:40:17
如果您从<button>元素中使用 this ，请确保不要设置type="reset". 在我将类型设置为之前它对我不起作用button
2021-05-04 10:40:17

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

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

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

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

编辑：为了根据下面的评论进行澄清，这会将 select 元素重置为其第一个空白条目，并且仅当列表中存在空白条目时。

@HBlackorby，您的评论很有帮助，但是 1) 选项value=""可以以任何顺序出现。2)没有值属性的选项ie<option></option>与具有空字符串值属性的选项 ie 不同<option value=""></option>，并且您明确表示我们需要value="" 部分3) 即使没有<option>空字符串值；设置.val('')将“影响更改”，选择将显示更改为空白，对吗？至少在我的 Chrome 中...
2021-04-21 10:40:17
只是一个警告：这仅在您确实想要选择第一个选项并且第一个选项的值集为空白时才有效。如果您的第一个选项有其他值，或者 SELECT 框中的任何选项都没有值为空，那么这不会影响任何更改。或者，如果某个其他选项的值为空，它将改为选择该选项。
2021-04-27 10:40:17
是的，这几乎一直有效。其他解决方案有时可能会出现问题。确实是最简单的方法。
2021-05-07 10:40:17

正如@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') );
});
但反之亦然，支持没有意义——这相当于一个大下拉菜单。我不明白。
2021-04-21 10:40:17
Jens Roland 所说的，反之亦然 ^^ jsfiddle.net/weg82/2
2021-04-26 10:40:17
@vsync：$(this)指的是$('#name')，不是$('#name2')，所以没有
2021-04-26 10:40:17
defaultSelected是一种<option>财产，总是会返回undefined一个<select>
2021-05-02 10:40:17
只写就够了 $('#name2').val( $(this).prop('defaultSelected') );
2021-05-13 10:40:17

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

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

这对我有很大帮助。

$(yourSelector).find('select option:eq(0)').prop('selected', true);
其它你可能感兴趣的问题
上一篇如何在 JavaScript 中获取时区名称？ 下一篇我可以命名一个 JavaScript 函数并立即执行它吗？