javascript - 如何在具有多个选择的表单中使用 jquery 设置选定的下拉选项？

Question

我有一些文本输入和下拉菜单的表单。此元素是根据上一页中的用户选择动态生成的，并且这种元素的动态生成工作正常。现在，假设我的代码如下所示 -

<form id="myForm" >
<select id='id1'>
<option value="">Select an option</option>  
<option value="opt1">opt1</option>  
<option value="opt2">opt2</option>  
<option value="opt3">opt3</option>  
</select>  
<select id='id2'>  
    <option value="">Select an option</option>  
    <option value="Apple">Apple</option>  
    <option value="Orange">Orange</option>  
    <option value="Grape">Grape</option>  
   </select>  
</form>

现在我想将所有下拉菜单项的选项重置为第一个，即 - 当用户点击重置按钮时“选择一个选项”。

<button class="reset-field" id="clearBtn">Reset</button>

为此我尝试了-

$(document).ready(function(){
 ...
  $("#clearBtn").click(function(){
  $('#myForm select').each(function(key, value) {
   $(this).val("");
  });
 });
});

基本上这会将值设置为 "" 而不是选项。我的意思是所选项目没有改变。知道我们如何将选项设置为 - “选择一个选项”。

谢谢。

Answer 1

$(this)[0].selectedIndex = 0;

在 jQuery 元素上使用数组选择器将返回指向实际基于 DOM 的对象(而不是 jQuery 包装对象)的指针。从那里，您可以将 selectedIndex 设置为 0(列表中的第 0 个元素)。