Question

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

我尝试过使用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");
});

Answer 1

使用selector 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() {
    $("#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>

Answer 2

试试这个

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

see这就是你正在寻找的东西。

Answer 3

尝试使用$('select[name=rt] option:eq(2)').attr('selected', 'selected');第二个选项进行选择，因为默认选择了第一个选项- Select a fruit -，因此select

中没有任何更改

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

试试这个

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

Answer 6

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

Answer 7

请试试这个

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

Answer 8

以下代码将从#rs中选择rt之后选择$("#rt").on("change", function() { $('#rs').find('option:eq(1)').prop('selected', true) });的第一个元素。我相信这就是你想要的。我怀疑名字是混淆的（因为大多数形式从上到下）。如果你想要反过来，只需评论。

＆＃13;

<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>

＆＃13;

UITapGestureRecognizer

＆＃13;

Answer 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>

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

9 个答案: