如何使用 jQuery 选择 <select> 的第一个选项答案

【问题标题】：How to make the first option of <select> selected with jQuery如何使用 jQuery 选择 <select> 的第一个选项
【发布时间】：2010-11-27 17:00:15
【问题描述】：

如何使用 jQuery 选择第一个选项？

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

【问题讨论】：

标签： jquery select

【解决方案1】：

$("#target").val($("#target option:first").val());

【讨论】：

应该注意，这更容易用 $("#target")[0].selectedIndex = 0;
有效，但它基于第一个元素value，如果第一个元素包含空值，它将选择最近的有值元素
似乎工作得很好，除了 IE6。不确定 7-8，适用于 9。
我放弃了我之前的声明，我已经超越了自己。 $("#target").val("option:first");最适用于任何地方，但 IE6 $("target").val($("#target option:first").val());将在 IE6 中工作，因为您实际上是在查找第一个值，并将其作为目标值输入。两个 id 查找而不是一个。
它实际上对于 IE6、7 和 8 是必需的。而 .val('option:first') 在 IE9（以及 Safari 和 Firefox 以及 Chrome 和 Opera）中有效。

【解决方案2】：

// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');

【讨论】：

第二种方法很好。请添加所选属性的值。例如，attr("selected", "selected")。如果没有这个额外的参数，就不会进行选择。
@EgorPavlikhin - 我刚刚编辑了答案以包含 JQuery 代码，以从可能已经选择的任何选项中删除“已选择”标志。现在答案是正确的:)
不需要each函数，应该是：$('#target option[selected="selected"]').removeAttr('selected')现在也应该与removeProp和prop一起使用。
James Lee Baker 在其他地方对此问题的回答的更全面版本，但增加了计算周期，如果接口管理良好，这可能不是必需的。

【解决方案3】：

当你使用

$("#target").val($("#target option:first").val());

如果第一个选项值为 null，这将在 Chrome 和 Safari 中不起作用。

我更喜欢

$("#target option:first").attr('selected','selected');

因为它可以在所有浏览器中运行。

【讨论】：

您还需要“取消选择”任何先前选择的元素，以便在更多情况下工作。有关详细信息，请参阅 James Lee Baker 的答案。

【解决方案4】：

$("#target")[0].selectedIndex = 0;

【讨论】：

这在下拉菜单中有预选项目的情况下不起作用。有关详细信息，请参阅所选答案上的我的 cmets。

【解决方案5】：

如果您禁用了选项，您可以添加 not([disabled]) 以防止选择它们，这会导致以下结果：

$("#target option:not([disabled]):first").attr('selected','selected')

【讨论】：

关于禁用选项的要点。很好地补充了所提供的答案！

【解决方案6】：

我发现如果已经有一个 selected 属性，那么仅设置 attr selected 是行不通的。我现在使用的代码会先取消设置 selected 属性，然后选择第一个选项。

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');

【讨论】：

这很好用，并且与 James Lee Baker 在此问题其他地方指出的答案非常相似。我喜欢 option:selected 和 option:first 的另一个答案，因为 option:first 的执行可能比 find() 更快（计算方面）。

【解决方案7】：

我会这样做：

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');

【讨论】：

这很好用，并且与 James Lee Baker 在此问题其他地方指出的答案非常相似。我喜欢 option:selected 和 option:first 的另一个答案，因为 option:first 的执行可能比 find() 更快（计算方面）。

【解决方案8】：

另一种重置值的方法（对于多个选定元素）可能是这样的：

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});

【讨论】：

+1 这实际上是一个很好的答案，但您可以将其更具体地用于问题域；而不是$("selector")，你可以写$('#target')

【解决方案9】：

如果你打算使用第一个选项作为默认选项

<select>
    <option value="">Please select an option below</option>
    ...

那么你可以使用：

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

它既好又简单。

【讨论】：

【解决方案10】：

更改 select 输入的值或调整 selected 属性可能会覆盖 DOM 元素的默认 selectedOptions 属性，从而导致元素在调用了 reset 事件的表单中可能无法正确重置。

使用jQuery的prop方法来清除和设置需要的选项：

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");

【讨论】：

完美。我有级联下拉菜单。当用户选择父选项 2 然后选择子选项 3 时，我不希望它“坚持”。换言之，用户然后选择父#1，然后重新选择父#2。发生这种情况时，我希望子菜单重置为第一个选项（在我的情况下为“任何”）。此处的所有其他解决方案在 Firefox v19 和 Linux 上的 Chrome 上都失败了。

【解决方案11】：

我认为我发现关于投票最多的答案的一个微妙点是，即使他们正确更改了所选值，他们也不会更新用户看到的元素（仅当他们点击小部件他们会在更新的元素旁边看到一个检查）。

将 .change() 调用链接到末尾也会更新 UI 小部件。

$("#target").val($("#target option:first").val()).change();

（请注意，我在使用 jQuery Mobile 和 Chrome 桌面上的框时注意到了这一点，因此可能并非所有地方都如此）。

【讨论】：

将 .change() 调用链接到末尾也会更新 UI 小部件。

【解决方案12】：

你可以试试这个

$("#target").prop("selectedIndex", 0);

【讨论】：

这并不是在所有情况下都能正常工作。我有一个父/子级联下拉菜单。选择父#1，显示子#1，选择父#2，显示子#2。每当他们选择新的父母时，都应该将相应的孩子设置回第一个选项。此解决方案不这样做。它使子菜单“粘滞”。请参阅此问题的 option:selected.prop('selected',false) / option:first.prop('selected','selected') 解决方案，了解适用于更多场景的答案。
这不会触发 onChange 事件。至少在 chrome 中。
谢谢！这是对我有用的答案列表中的第一个答案。
@Tomasz $("#target").prop("selectedIndex", 0).change();
@Romesh 如何根据值设置 selectedIndex？

【解决方案13】：

$('#newType option:first').prop('selected', true);

【讨论】：

只有在没有选择的选项时才有效。请参阅 James Lee Baker 的回答。

【解决方案14】：

$("#target").val(null);

在 chrome 中运行良好

【讨论】：

【解决方案15】：

虽然可能不需要每个函数...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

为我工作。

【讨论】：

【解决方案16】：

如果您要存储选择元素的 jQuery 对象：

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());

【讨论】：

【解决方案17】：

用途：

$("#selectbox option:first").val()

请在this JSFiddle中找到工作简单。

【讨论】：

第 15 位、第 25 位或带有特定文字的位置如何？ :D
调用.val() 只是获取列表中第一个选项的值。正如原始问题中所问的那样，它实际上并没有选择（选择）第一个选项。

【解决方案18】：

就这么简单：

$('#target option:first').prop('selected', true);

【讨论】：

这个好多了

【解决方案19】：

用途：

alert($( "#target option:first" ).text());

【讨论】：

【解决方案20】：

在 James Lee Baker 的回复中，我更喜欢这个解决方案，因为它消除了对浏览器对 :first :selected ... 支持的依赖。

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');

【讨论】：

【解决方案21】：

它只对我有用，最后使用触发器（'change'），如下所示：

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

【讨论】：

【解决方案22】：

使用带有ECMAScript 6的jQuery检查这个最佳方法：

$('select').each((i, item) => {
  var $item = $(item);
  $item.val($item.find('option:first').val()); 
});

【讨论】：

【解决方案23】：

对我来说，它只有在我添加以下代码时才有效：

.change();

对我来说，它仅在我添加以下代码时才有效：由于我想“重置”表单，即选择表单所有选择的所有第一个选项，我使用了以下代码：

$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

【讨论】：

【解决方案24】：

对我来说，它只有在我添加以下代码行时才有效

$('#target').val($('#target').find("option:first").val());

【讨论】：

【解决方案25】：

您可以使用它从dropdown 中选择任何选项。

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val());

【讨论】：

【解决方案26】：

$('select#id').val($('#id option')[index].value)

将 id 替换为特定的选择标签 ID，将 index 替换为您要选择的特定元素。

即

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

所以这里对于第一个元素选择我将使用以下代码：

$('select#ddlState').val($('#ddlState option')[0].value)

【讨论】：

【解决方案27】：

这对我有用！

$("#target").prop("selectedIndex", 0);

【讨论】：

【解决方案28】：

var firstItem = $("#interest-type").prop("selectedIndex", 0).val();

console.log(firstItem)

【讨论】：