javascript - 清除/重置按钮并在下拉列表中显示第一个/占位符

Question

我有一个下拉列表和一个“多个”下拉列表，如下所示

@Html.DropDownList("process", Model.Processes, new { placeholder = "-- select --", style = "width: 100%", multiple = "multiple" })
@Html.DropDownList("products", Model.Products, new { placeholder = "-- select --", style = "width: 100%" })

我使用了此链接 http://www.webcodeexpert.com/2014/12/how-to-reset-aspnet-dropdownlist-or.html 中的重置代码

我让它按照我的预期工作，其中的值被清除/重置，但我想问的是如何将下拉列表中的文本重置回 --select-- 部分或保留它“多个”下拉列表为空。我有一个用于调用 javascript 函数的按钮，我使用此代码使其工作。

function clearAll() {
    $('#products').find('option:first').prop('selected', true);
    $('#products').val('0');
}

我尝试了 .val('0') 部分，但下拉列表中的文本仍然与所选内容相同，但值已分配回默认值。

Answer 1

您可以使用选项元素的 defaultSelected 属性:

包含所选 HTML 属性的初始值，指示是否默认选择该选项。因此，DOM 界面已经记录了最初选择的选项。

$("#reset").on("click", function () {
$('#my_select option').prop('selected', function() {
    return this.defaultSelected;
});

});

这甚至适用于多选元素。

如果您不想遍历所有选项，但在找到最初选择的选项后“中断”，则可以使用 .each 代替:

$('#my_select option').each(function () {
if (this.defaultSelected) {
    this.selected = true;
    return false;
}

});