如何使用jquery重置表单中的多个选择框？

Posted 2023-03-11

【中文标题】如何使用jquery重置表单中的多个选择框？

【英文标题】：How to reset multiple select boxes in a form with jquery?

【发布时间】：2014-09-06 10:07:59

【问题描述】：

如何使用 jquery 重置表单中的多个选择框？

有多个选择框 它们是动态生成的，我们不知道它们会是什么 某些框选项标签将被标记为选中 小提琴：http://jsfiddle.net/Qnq82/

到目前为止，它会重置除选择之外的所有内容。

$('button#reset').click(function()
    $form = $('button#reset').closest('form');
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    $form.find('select').selectedIndex = 0;
  );

添加了一些标记：

<form id="form" name="form" method="post" class="form" role="form" action="inventory-search" enctype="multipart/form-data">


    <div class="form-group">
        <label for="grade">Grade</label>
        <select name="grade" class="form-control input-sm" onchange="this.form.submit();">
            <option value="">Any</option>
            <option value="opt1">opt1</option>
            <option value="opt2" selected="selected">opt2</option>

        </select>
    </div>


    <!-- there are 6 more select controls -->


    <div class="form-group">
        <label>&nbsp;</label>
        <button type="submit" name="search" id="search" value="search" class="btn button-sm btn-primary">Search</button>
    </div>

    <div class="form-group">
        <label>&nbsp;</label>
        <button type="reset" name="reset" id="reset" value="reset" class="btn button-sm btn-primary">Reset</button>
    </div>

</form>

【问题讨论】：

虽然在大多数情况下将selectedIndex 设置为0 会起作用，但它不会真正重置select 元素。它只是选择第一个选项。对于您的其他表单元素也是如此。但是，如果您想这样做，请使用 .prop: $form.find('select').prop('selectedIndex', 0); 。您正在将 DOM API 与 jQuery API 混合使用。

你能告诉我们标记吗，我试过了？

“某些框选项标签将被标记为选中”，您是要重置为这些值还是始终要选择第一个选项？ FWIW，在这种情况下，标记是无关紧要的。但你似乎在听除了我以外的其他人:)

哦，我刚刚看到您甚至还有一个名为“重置”的按钮。您可能还想更改它，因为默认重置按钮 <input type="Reset" /> 会重置我描述的值（将值更改回 html 中定义的值）。

因为<button type="reset" ..>。正如我在之前的评论中解释的那样。如果您在事件处理程序的末尾放置一个alert，您可以看到它如何首先选择第一个选项，然后将值重置为默认值：jsfiddle.net/Qnq82/8。有关按钮类型的更多信息，请参阅developer.mozilla.org/en-US/docs/Web/HTML/Element/…。 （事实证明 HTML 并不是无关紧要的；））

【参考方案1】：

这将起作用：-

$form.find('select').prop('selectedIndex',0);

【参考方案2】：

我使用此代码成功取消选择表单中的所有 html 选择：

$("#form1").find('select').prop('selectedIndex', -1);

【参考方案3】：

我在 *** 上尝试并搜索了很多，但没有找到任何重置多选的解决方案。然后我找到了 This Link。这解决了我的问题。 这是代码示例。

$("#yourcontrolid").multiselect('clearSelection');

【参考方案4】：

把最后一行改成这样：

$form.find('select')[0].selectedIndex = 0;

selectedIndex 是 HTMLElement 的属性，而不是 jQuery 对象。

如果你知道值，那么你可以$form.find('select').val('value');

【讨论】：

我们不知道值并且有几个选择框。

不起作用。 ~ 可能是因为该选项被选中="selected" ？

【参考方案5】：

以下代码对我有用：

$('.formID').find('select[id="selectID1"]').removeAttr('selected').trigger('change');
$('.formID').find('select[id="selectID2"]').removeAttr('selected').trigger('change');

【参考方案6】：

$form.find('select').each(function()
    $(this).val($(this).find('option:first').val());
);

这个对我有用...