所选的allow_single_deselect未按预期工作

Question

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

<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});

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

Answer 1

如果您使用的是动态下拉列表，则通常会发生这种情况。取消选择将在初始化后正常工作。清空下拉菜单并填入新值并执行chosen:update操作后。您不会看到所选的allow_single_deselect选项不起作用。如果任何人正在寻找不可见的已选择取消选择选项

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

您需要添加一个空的选项标签，然后才能填充下拉列表中的新值。如果在实际的下拉值之前缺少一个空的<option>，您将不会看到取消选择十字标记图标。

​

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

​

Answer 2

我知道这篇文章很老了，但是如果有人还不能理解这个问题的话。这是你需要做的。

在选项documented https://harvesthq.github.io/chosen/options.html中提到了这一点

在单次选择中设置为true时，Chosen将添加一个UI元素，该元素用于选择第一个元素(如果为空)。

<select class="chosen">
    <option value=""></option> <!-- required -->
    <option value="Batman">Batman</option>
    ...
</select>

$(document).ready(function(){
    $(".chosen").chosen({
        allow_single_deselect: true
    });
});

我还是看不到“x”

确保在“相同的位置”中包含了精灵。

chosen
|-- styles
|   |-- chosen.jquery.min
|   |-- chosen.min.css
|   |-- chosen-sprite.png // image
|   |-- chosen-sprite@2x.png // image

Answer 3

我会试着让选项不是真正空的，而是留一些空格，甚至像'(none)‘或'(choose One)’这样的东西。