代码之家 › 专栏 › 技术社区 › mrjayviper

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

jquery

mrjayviper · 技术社区 · 7 年前

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

我试过使用attr和val函数(参见 this jddle-link),它就是不起作用。作为测试,我的示例有一个警报代码,显示。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");
});

9 回复 | 直到 7 年前

Aneesh R S 7 年前

使用选择器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>

Harsh Jaswal 7 年前

试试这个

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

see

Bhargav Chudasama 7 年前

尝试使用 $('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>

Milan Chheda guest271314 7 年前

而不是 first-child ,您需要使用 eq() .

每当您从下拉列表中选择任何一辆车时,以下代码将始终自动选择第一个水果:

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

Hanan Ashraf 7 年前

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

Neil 7 年前

以下代码将选择 #rs 从中选择一个后 rt . 我相信这就是你想要的。我怀疑这些名字混淆了(因为大多数形式是从上到下的)。如果你想要相反的结果,只需评论即可。

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

Pang Ajmal PraveeN 7 年前

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

Pang Ajmal PraveeN 7 年前

请试试这个

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

Raj 4 年前

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