j查询"清除"选择框中的值

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>

当"；重置"；按钮。当你单击重置按钮。选择框值被设置为"0"&"；。但是。。视觉显示选择框的"也设置为空白，而不是"；"按颜色"；。为什么会出现这种情况？

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

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( "" )

这是一个有效的代码和一个代码笔：

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