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

我会尝试让选项不是空的但是留下一些空格，甚至是“（无）”或“（选择一个）。”

Answer 3

哎呀我的坏，精灵图片的路径显示选择关闭按钮是不正确的，因为下拉菜单上没有显示关闭按钮（交叉符号），感觉像空白不起作用

Answer 4

之前我没有使用过Chosen插件，但我查看了website，第一个示例有一个空选项，而Chosen函数在调用时将其除去。另外，allow_single_deselect选项表示它将“为选项取消选择添加UI元素”，这并不意味着它保留了空选项。

Answer 5

确保在更新所选内容之前和之后都有一个空选项。

示例：

//html
<select class="consultant_refer"><option></option></select>

//initialize
        $('.consultant_refer').chosen({width: '100%', allow_single_deselect: true})

//empty select but make sure to add another empty option
        $('.consultant_refer').empty().append('<option>')

//add other options
        consultants.forEach(function (data) {
             $('.consultant_refer').append($('<option>').val(data.id).text(data.name))
        })
        $('.consultant_refer').trigger('chosen:updated')

Answer 6

我知道这则帖子很旧，但是如果仍然无法解决这个问题。这就是您需要做的。

https://harvesthq.github.io/chosen/options.html

中记录的选项中提到了此问题

当单选设置为true时，选择添加一个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

选择allow_single_deselect未按预期工作

6 个答案:

我仍然看不到“ x”