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

Posted 2023-05-09

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

【英文标题】：Clear/reset button and display the first/placeholder in the dropdown

【发布时间】：2015-12-18 12:06:51

【问题描述】：

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

@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') 部分，但下拉列表中的文本仍然与所选内容相同，但该值已分配回默认值。

【问题讨论】：

所以我发现了我的问题，它比我想象的要简单。我正在使用 select2 库，我做了这样的事情。 $("#Products").select2('val', 0);并且重置按钮起作用了。

【参考方案1】：

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

包含 selected 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;

);

【参考方案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>

【讨论】：

这个重置类型按钮如何知道要重置哪个下拉列表（包括多选）？或者它是否会重置所有下拉列表的所有实例？编辑：我是个白痴。我没有仔细阅读你的答案。您说它将重置表单中的所有“输入”。不幸的是，表单中没有“输入”。它们主要在 div 标签中。

好的，我只是在 JSFiddle 上玩了一下你的例子。我认为当您的 jQuery 版本为 1.9 或更高版本时，您提出的解决方案应该可以工作。你使用什么 jQuery 版本？也许你可以更新它...