Question

我在网上找到了清除表单的代码，但是对于选择框没有任何内容。使用jquery我尝试添加代码以在重置表单时在选择框中选择默认选项。我认为找到默认值的唯一方法是查找SELECTED选项的位置。然后我发现当用户选择其他东西时，jquery看不到被选为默认值，而是用户选择的新选项。

如何在表单中找到默认选项，以便我可以正确清除它？

//http://www.learningjquery.com/2007/08/clearing-form-data
$.fn.clearForm = function () {
    return this.each(function () {
        var type = this.type, tag = this.tagName.toLowerCase();
        if (tag == 'form')
            return $(':input', this).clearForm();
        if (type == 'text' || type == 'password' || tag == 'textarea')
            this.value = '';
        else if (type == 'checkbox' || type == 'radio')
            this.checked = false;
        else if (tag == 'select') {
            //alert($('option', this).size());
            alert($('option[selected]', this).val());
        }
    });
};

Answer 1

我使用以下代码段来实现此目的：

$(this).val($(this).find('option[selected]').val());

option[selected]将获得“硬编码”选定选项（默认值）。相反，option:selected将获得当前选择的选项。

这适用于单选，多选需要不同的方法：

$(this).find('option').each(function(i, opt) {
    opt.selected = opt.defaultSelected;
});

这也适用于单一选择。

Answer 2

通常默认值是<option>中的第一个<select>，因此您可以这样做：

$(this).find("option:first").attr("selected", true);

但是，如果您要重置整个表单，可以通过.reset()调用将其重置为页面加载时的状态，如下所示：

if (tag == 'form')
  this.reset();

我不确定你之后是什么，只是把它扔到那里。通常原生DOM方法已经非常方便，不要忽略它们！

Answer 3

我发现Koraktor的答案在IE8及更低版本中无效。我通过迭代选项解决了这个问题，直到找到默认选择的选项：

var defaultValue;
$(this).find('option').each(function (i, o) {
  if (o.defaultSelected) {
    defaultValue = o.value;
    return;
  }
});

不太优雅，但可以在IE中使用。

Answer 4

Koraktor的答案对我来说也不适用于Chrome，我无法使用form.reset（），因为我想重置表单的子集。我发现最简单的事情是在加载页面时给选择一个defaultValue，然后重置函数在：input选择器返回的所有元素上使用相同的行。

    $("#top1 select").each(function() {
        this.defaultValue = $(this).val();
    });

    $(".reset").click(function() {
        $('#top1 :input').each(function() {
            $(this).val(this.defaultValue);
        });
    });

在HTML select标签中查找默认选择的选项？

4 个答案: