在HTML select标签中如何找到默认选定的选项？

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());
        }
    });
};

- user34537

Answer 1

我使用下面的代码片段来实现这个功能：

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

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

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

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

这对于单选也是有效的。

- Koraktor

Answer 2

通常情况下，默认选项是中的第一个，所以你可以这样做： $(this).find("option:first").attr("selected", true); 如果你想重置整个表单，可以使用.reset()方法将其重置为页面加载时的状态，如下所示： if (tag == 'form') this.reset(); 我不确定这是否符合您的实际需求，但只是提供一下。通常情况下，已经存在的原生DOM方法非常方便，不要忽略它们！

- Nick Craver

---

我在谈论的是当HTML中有一个包含5个选项的列表，而HTML作者在HTML源代码中的其中一个选项中写入了SELECTED。这可能是最后一个、倒数第二个、第二个等等。如果这段代码是生成的，我会将一些JS变量内联到我的外部JS文件中使用，但不幸的是HTML没有被生成。 - user34537

@acidzombie24 - 在这种情况下，.reset() 似乎是你想要的...它会将整个 <form> 重置为页面加载时的状态，包括最初选择的 <option>...你的另一种选择是在页面加载时存储它并稍后恢复。 - Nick Craver

我不确定为什么我不能使用那个函数，但它看起来正在做我想要的事情。（如果我遇到问题，我会在这里告诉你）。我该如何通过jquery清除它？我用这个进行测试 $("form")[0].reset(); 但是将 $("form")[0] 替换为 $(this) 和 $(this).get() 会出现错误。在Chrome中使用 "Uncaught TypeError: Object [object HTMLFormElement] has no method 'reset'"。 - user34537

@acidzombie24 - 这是一个DOM方法，所以如果this是一个表单元素，只需使用this.reset()即可...希望这个例子能够解决问题：$("form").each(fuction() { this.reset(); }); - Nick Craver

哦，明白了。我不知道我为什么会感到困惑。这是一个很好的回答，特别是对于询问/说自己不需要自己的jQuery重置（或者为什么没有提到它）。我看到它在注释中提到了，但我几乎从来不看注释。 - user34537

Answer 3

我发现Koraktor的答案在IE8及更低版本中不起作用。我通过迭代选项找到默认选定的一项来解决这个问题:

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

不太优雅，但在IE中可行。

- janerist

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);
        });
    });

- Colin