如何使用 jquery 自动选择下拉列表中的第一个选项？答案

【问题标题】：How to auto-select the first option in a dropdown list using jquery?如何使用 jquery 自动选择下拉列表中的第一个选项？
【发布时间】：2017-11-14 05:15:05
【问题描述】：

我无法自动选择下拉列表中的第一个选项。

我尝试过使用 attr 和 val 函数（有关示例，请参见 this jdfiddle 链接），但它不起作用。作为测试，我的示例有一个警报代码，它显示第一个选项的 .text() 并且效果很好。所以我的选择器正在工作。

非常感谢！

示例 HTML 代码：

<select id="rt" name="rt" style="width: 300px;">
  <option value="blank" selected="selected">- Select a fruit -</option>
  <option value="20270">Apple</option>
  <option value="20271">Banana</option>
  <option value="20273">Grapes</option>
</select>
<br>
<select id="rs" name="rs" style="width: 300px;">
  <option value="blank" selected="selected">- Select a car -</option>
  <option value="20226">Toyota</option>
  <option value="20227">Chevy</option>
  <option value="20228">Mazda</option>
</select>

示例 JS 代码：

$("#rs").on("change", function() {
    alert("rt: "+$("#rt option:first-child").text());
    $("#rt option:first-child").attr("selected", "selected");
    //$("#rt option:first-child").val("blank");
});

【问题讨论】：

所以你的意思是，选择汽车应该自动选择第一个水果？？

标签： jquery

【解决方案1】：

使用选择器val方法设置值

$("#rs").on("change", function() {
    alert("rt: "+$("#rt option:first-child").text());
    $("#rt").val($("#rt option:first-child").attr("value"));    
});

或者干脆

$("#rs").on("change", function() {       
    $("#rt").val($("#rt option:first").val());    
});

下面的 sn-p 会做你想做的事

$("#rs").on("change", function() {
    $("#rt").val($("#rt option:first").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="rt" name="rt" style="width: 300px;">
  <option value="blank" selected="selected">- Select a fruit -</option>
  <option value="20270">Apple</option>
  <option value="20271">Banana</option>
  <option value="20273">Grapes</option>
</select>
<br>
<select id="rs" name="rs" style="width: 300px;">
  <option value="blank" selected="selected">- Select a car -</option>
  <option value="20226">Toyota</option>
  <option value="20227">Chevy</option>
  <option value="20228">Mazda</option>
</select>

【讨论】：

【解决方案2】：

试试这个

$('select>option:eq(1)').prop('selected', true);

see这似乎就是你要找的东西。

【讨论】：

【解决方案3】：

尝试使用$('select[name=rt] option:eq(2)').attr('selected', 'selected'); 第二个选项来选择，因为第一个选项- Select a fruit - 是默认选择的，所以select 没有任何变化

如果您选择第一个选项，请使用option:eq(1)

$(document).ready(function() {
  $("select#rs").on("change", function() {
    //$("#rt option:first-child").attr("selected", "selected");
    $('select[name=rt] option:eq(2)').attr('selected', 'selected');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="rt" name="rt" style="width: 300px;">
  <option value="blank" selected="selected">- Select a fruit -</option>
  <option value="20270">Apple</option>
  <option value="20271">Banana</option>
  <option value="20273">Grapes</option>
</select>
<br>
<select id="rs" name="rs" style="width: 300px;">
  <option value="blank" selected="selected">- Select a car -</option>
  <option value="20226">Toyota</option>
  <option value="20227">Chevy</option>
  <option value="20228">Mazda</option>
</select>

【讨论】：

【解决方案4】：

您需要使用eq()，而不是first-child。

当您从下拉列表中选择任何汽车时，以下代码将始终自动选择第一个水果：

$("#rs").on("change", function() {
  $("#rt option:eq(1)").prop("selected", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="rt" name="rt" style="width: 300px;">
  <option value="blank" selected="selected">- Select a fruit -</option>
  <option value="20270">Apple</option>
  <option value="20271">Banana</option>
  <option value="20273">Grapes</option>
</select>
<br>
<select id="rs" name="rs" style="width: 300px;">
  <option value="blank" selected="selected">- Select a car -</option>
  <option value="20226">Toyota</option>
  <option value="20227">Chevy</option>
  <option value="20228">Mazda</option>
</select>

【讨论】：

【解决方案5】：

$("#rs").on("change", function() {
    alert("rt: "+$("#rt option:first-child").text());
    $("#rt").val("blank");
});

【讨论】：

【解决方案6】：

在您从rt 中选择一个元素后，以下代码将选择#rs 的第一个元素。我相信这就是你想要的。我怀疑名称混淆了（因为大多数表格都是从上到下的）。如果您希望相反，只需发表评论。

$("#rt").on("change", function() {
	$('#rs').find('option:eq(1)').prop('selected', true)
});

<select id="rt" name="rt" style="width: 300px;">
  <option value="blank" selected="selected">- Select a fruit -</option>
  <option value="20270">Apple</option>
  <option value="20271">Banana</option>
  <option value="20273">Grapes</option>
</select>
<br>
<select id="rs" name="rs" style="width: 300px;">
  <option value="blank" selected="selected">- Select a car -</option>
  <option value="20226">Toyota</option>
  <option value="20227">Chevy</option>
  <option value="20228">Mazda</option>
</select>

【讨论】：

【解决方案7】：

试试这个

$("#rs").on("change", function() {
    alert("rt: "+$("#rt option:first-child").text());
    $('#rt').html($("#rt option:first-child").text());
});

【讨论】：

【解决方案8】：

请试试这个

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

【讨论】：

【解决方案9】：

请试试这个

<script>
   $(document).ready(function(){
       $("#rs").val($("#rs option:first").val());
   });
</script>
<select id="rs" name="rs">
   <option value="20226">Toyota</option>
   <option value="20227">Chevy</option>
   <option value="20228">Mazda</option>
</select>

【讨论】：