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

Question

我在自动选择下拉列表中的第一个选项时遇到问题。

我试过使用 attr 和 val 函数（请参阅此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");
});

Answer 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());    
});

下面的代码段将做你想要的

$("#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());    
});