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

尝试使用.text("")代替.val("")

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

Answer 2

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

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

Answer 3

（严格来说，这不是一个答案，只是一个想法）

val() jQuery中的概念非常简陋。

检查this discussion我在哪里提出形成机制。有了它，您的任务就可以完成

$("#myForm").formation().value = { id1:"", id2:"" };

基本上，形成将表单的值作为其输入的名称/值集合引入。它正确处理选择，无线电组和复选框的值。

Answer 4

我认为这就是你要找的东西：

http://jsfiddle.net/YZWTY/

$(function(){
        $("#clearBtn").click(function(e){
         e.preventDefault();
            $("#myForm select option").each(function(){
               var a = $(this).index();
               $(this).val(a);   
              });
            $("#myForm select").val("0");
        });
});

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

4 个答案: