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-- part或保留空白为“多个”下拉列表。我有一个按钮，我曾经调用javascript函数，我使用此代码使其工作。

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

我尝试了.val（'0'）部分，但是下拉列表中的文本仍然与选中的文本保持一致，但该值已分配回默认值。

Answer 1

您可以使用option元素的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;
}

}）;

Answer 2

你试过button type="reset"吗？这会重置您表单的所有input。也是选择。如果要重置所有字段，我会尝试使用此解决方案，因为它不需要任何其他JavaScript代码。

<form>
  <select name="select1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
  </select>
  <select name="select2" placeholder="placeholder">
      <option></option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
  </select>
  <button type="reset">Reset</button>
</form>

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

2 个答案: