点击Clear Selection按钮后Select2选择未清空的问题咨询

点击Clear Selection按钮后，Select2组件的选择并未清空，也未切换到-No Selection-选项。当前使用的代码如下：

JS代码 #

$("#clearTag").select2();

document.getElementById('clear-selection').addEventListener('click', function () {
console.log("button clicked");
$("#clearTag").val('');
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"> 
<!-- Select2 CSS --><!-- Select2 JS --> 
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<div>
<select id="clearTag" name="clearTag" >
  <option value="" >-No Selection-</option>
     
      <option value="Duplicate" >Duplicate</option>
      <option value="HandwrittenNote" >HandwrittenNote</option>
      <option value="Inappropriate" >Inappropriate</option>
      <option value="Incomplete" >Incomplete</option>
      <option value="Incorrect" >Incorrect</option>
    
      <option value="NameDiscrepancy" >NameDiscrepancy</option>
      <option value="Payment" >Payment</option>
</select>

</div>

<input type="button" id="clear-selection" value="Clear Selection!">

请问使用$("#clearTag").val('');这种方式是否正确？

直接用$("#clearTag").val('');不正确。因为Select2是基于原生select封装的UI组件，仅修改原生select的value不会自动同步更新Select2的界面状态。

正确的解决方式需要在设置值后触发change事件，让Select2同步更新：

$("#clearTag").val('').trigger('change');

或者使用Select2官方推荐的API写法，效果完全一致：

$("#clearTag").select2('val', '').trigger('change');

另外，你当前代码混用了原生JS事件监听和jQuery，也可以统一改成jQuery写法更简洁：

$("#clearTag").select2();

$('#clear-selection').click(function () {
  console.log("button clicked");
  $("#clearTag").val('').trigger('change');
});

修改后点击按钮，Select2就会正确切换到-No Selection-选项，UI也会同步更新。

内容的提问来源于stack exchange，提问作者Tan