javascript – 选择allow_single_deselect未按预期工作

下面是我的标记,我的标记中包含空选项

<select name="drop_down" id="drop_down" class="single">
  <option></option>
  <option value="First Choice">First Choice</option>
  <option value="Second Choice">Second Choice</option>
  <option value="Third Choide">Third Choide</option>
</select>

我的js就像

$('.single').chosen({allow_single_deselect:true});

但我没有在初始化后的下拉列表中看到空白选项,我做错了什么？

解决方法:

如果您使用动态下拉列表,通常会发生这种情况.初始化后取消选择将正常工作.清空下拉列表后,将其填入新值并选择：更新它.您将看不到所选的allow_single_deselect选项不起作用.如果有人寻找隐形选择取消选择选项

参见：https://github.com/harvesthq/chosen/issues/1780

在填充下拉列表之前,您需要添加一个空选项标记.如果你错过了一个空的<选项>在实际下拉值之前,您将看不到取消选择十字标记图标.

$('#natureInput').chosen({
    allow_single_deselect:true,
    width: '50%'
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />

<label for="natureInput">Nature</label>
<select data-placeholder="Choose a nature" name="nature" id="natureInput">
  <option />
  <option>Spring</option>
  <option>Winter</option>
  <option>Summer</option>
</select>

标签：javascript,jquery-chosen
来源： https://codeday.me/bug/20190722/1504046.html