javascript - Select2 删除选项在 jquery 中不起作用

Question

我想删除 select2 选项并将其设为默认输入。通过使用$("#City").text('').trigger('change');触发器更改，我可以清除 select2 数据，而不是删除整个 select2 下拉列表。任何人都可以帮助我删除它。

到目前为止，我已经尝试过以下脚本：

$('#City').val(null).trigger('change');
$('#City').val('')
$("#city").empty()

以供参考：

$('select').select2();

.select2-container {
  min-width: 120px;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

<select id="City">
<option value="None">None</option>
<option id="one" value="1">One</option>
<option value="2">Two</option>
</select>

标签： javascripthtmljqueryjquery-select2

Answer 1

您可以使用$("#City").select2('destroy')销毁 select2 ，然后使用replaceWith将其替换为普通的 textbox 。

演示代码：

$(document).ready(function() {
  $('select').select2();
  $("#City").select2('destroy'); //destroy..plugin
  $("#City").replaceWith("<input type='text' id='City'>") //replace..
})

.select2-container {
  min-width: 120px;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

<select id="City">
  <option value="None">None</option>
  <option id="one" value="1">One</option>
  <option value="2">Two</option>
</select>