时间戳

首页 > 解决方案 > 选择框中的jquery“清除”值

javascript - 选择框中的jquery“清除”值

问题描述

所以我有一些看起来像这样的标记，还有一些 jQuery javascript：

let color_select = $('select#SelectByColor');
color_select.val([]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="SelectByColor" class='filter-select' name='color'>
  <option value="">By color</option>
  <option value="Red">Red</option>
  <option value="Blue">Blue</option>
  <option value="Green" selected="selected">Green</option>
  <option value="Yellow">Yellow</option>
</select>

<button id="FilterReset">Reset</button>

单击“重置”按钮时会调用它。它几乎可以工作 - 当您单击重置按钮时。选择框值设置为“”。但是..选择框的视觉显示也设置为空白，而不是“按颜色”。为什么会这样？

另外，根据 Chrome DevTools，选择的选项仍然是绿色。

标签： javascriptjqueryhtml-select

解决方案

将值设置为空字符串，而不是数组。

$("#FilterReset").click(function() {
  let color_select = $('select#SelectByColor');
  color_select.val("");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="SelectByColor" class='filter-select' name='color'>
  <option value="">By color</option>
  <option value="Red">Red</option>
  <option value="Blue">Blue</option>
  <option value="Green" selected="selected">Green</option>
  <option value="Yellow">Yellow</option>
</select>

<button id="FilterReset">Reset</button>

推荐阅读