jquery "clear" 值在 select 框中

Question

所以我有一些看起来像这样的标记，还有一些 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>

单击“重置”按钮时会调用它。它非常有效 - 当你单击重置按钮。 Select 框值设置为“”。但是..视觉显示 select 框的也设置为空白，而不是“按颜色”。为什么会这样？

此外，根据 Chrome DevTools，selected 选项仍然是绿色。

Answer 1

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

$("#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>

Answer 2

您在 .val(...) 函数中为选择器设置的值需要与 HTML 中的 value="..." 匹配。所以应该是 color_select.val( "" )

这是一个有效的代码和一个 codepen:

jQuery($ => {
  $('#FilterReset').on('click', () => {
    $("#SelectByColor").val("");
  });
});

jquery "clear" 值在 select 框中

jquery "clear" value in select box

javascript

jquery

html-select