如何在未選中所有選項的情況下恢復jQuery Chosen的數據佔位符

Question

我正在使用jQuery選擇（它工作得很好）。
但是我使用[選擇任何內容]狀態作爲所有選中狀態（見下面的代碼）：

$(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/）

雖然我可以添加一個選項爲「全部」時，會產生問題，因爲可以將「全部」與其他任何選項結合使用。

就像我說的 - 功能上，它工作正常。當一個項目被選中，然後因爲單詞「全部」消失而被取消選中時，它看起來是錯誤的。

有關如何找回它的任何想法？

Answer 1

實際上，當您在取消選擇所有選項後單擊下拉菜單之外時，單詞「全部」會再次返回。
這只是因爲輸入字段有焦點，佔位符「全部」沒有顯示。

當你牢記這一點時，你需要做的所有事情才能讓佔位符再次顯示，就是讓輸入字段在交互後變爲空時失去焦點。

---

代碼段（JS，CSS，HTML）：

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

.chosen-select{ 
 
    width:400px; 
 
}

<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>

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

• 在我的代碼，我只是觸發點擊body元素，以從中進入放置場（即使光標仍在其內部閃爍）。這不是最優雅的解決方案，但我嘗試了其他的東西，如$(this).blur();，並沒有爲我工作......也許你可以找到另一種方式來消除焦點，而不必涉及其他元素。
• 我不得不增加jQuery版本（將其改爲最高），因爲v1.6.4不能識別.on("input change propertychange"。
• 我刪除了函數包裝$(".chosen-select").chosen();，因爲它不是必需的。
• 我改變multiple=""到multiple="multiple"，因爲這僅僅是很好的做法：在XHTML中，屬性簡寫是不允許的，而且多屬性必須被定義爲<input multiple="multiple" />。