Question

我正在使用 jQuery Chosen （它工作得很好）但我使用[未选择]状态作为全选状态（参见下面的代码）：

$(function() {
  $(".chosen-select").chosen();
});

.chosen-select{
  width:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://www.sinkolas.com/v2/funciones/jquery.alerts.js"></script>
<script src="https://www.sinkolas.com/v2/funciones/jquery.ui.draggable.js"></script>
<script src="https://www.sinkolas.com/v2/funciones/FuncionesBellas.js"></script>
<script src="https://www.sinkolas.com/v2/chosen/chosen.jquery.min.js"></script>
<link href="https://www.sinkolas.com/v2/chosen/chosen.min.css" rel="stylesheet"/>

<select id="xyz" data-placeholder="All" class="chosen-select" multiple="" tabindex="-1">
  <option value="5">A</option>
  <option value="4">B</option>
  <option value="3">C</option>
  <option value="2">D</option>
  <option value="1">E</option>
</select>

（小提琴：http://fiddle.jshell.net/zc83L1d5/ ）

虽然我可以为“all”添加一个选项，但它会产生一个问题，因为“all”可以与任何其他选项一起选择。

就像我说 - 功能上，它工作正常。选择一个项目然后取消选择它只是看起来错误，因为单词“All”消失了。

关于如何取回它的任何想法？

Answer 1

实际上，当你在取消选择所有选项后在下拉列表外点击时，单词＆＃34; All＆＃34;再次回来。
这只是因为输入字段具有焦点，占位符＆＃34;全部＆＃34;没有出现。

当你记住这一点时，你需要做的就是让占位符再次显示，让输入字段在交互后变为空时失去焦点。

代码段（JS，CSS，HTML）：

＆＃13;

$(window).on("load",function(){
  $(".chosen-select").chosen();
  $(".chosen-select").on("input change propertychange",function(){
    if (!$(this).val()) {
      $("body").click();
    }
  });
});

＆＃13;

.chosen-select{
  width:400px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.sinkolas.com/v2/funciones/jquery.alerts.js"></script>
<script src="https://www.sinkolas.com/v2/funciones/jquery.ui.draggable.js"></script>
<script src="https://www.sinkolas.com/v2/funciones/FuncionesBellas.js"></script>
<script src="https://www.sinkolas.com/v2/chosen/chosen.jquery.min.js"></script>
<link href="https://www.sinkolas.com/v2/chosen/chosen.min.css" rel="stylesheet"/>

<select id="xyz" data-placeholder="All" class="chosen-select" multiple="multiple" tabindex="-1">
  <option value="5">A</option>
  <option value="4">B</option>
  <option value="3">C</option>
  <option value="2">D</option>
  <option value="1">E</option>
</select>

＆＃13;

＆＃13; （小提琴：http://fiddle.jshell.net/zc83L1d5/2/ ）

在我的代码中，我只是触发单击body元素以从输入字段取消聚焦（即使光标仍然在其中闪烁）。这不是最优雅的解决方案，但我尝试了其他类似的事情，例如$(this).blur();，但没有任何对我有用的......也许你可以找到另一种方法来消除焦点，而不必涉及其他元素。
我不得不增加jQuery版本（将其更改为最高版本），因为v1.6.4无法识别.on("input change propertychange"。
我删除了函数包装$(".chosen-select").chosen();，因为没有必要。
我将multiple=""更改为multiple="multiple"，因为这只是一个好习惯：在XHTML中，禁止属性最小化，并且必须将multiple属性定义为<input multiple="multiple" />

如果未选中所有选项，如何恢复jQuery Chosen的数据占位符

1 个答案: