How do I restore jQuery Chosen's data-placeholder when all options are unchecked

Question

I am using jQuery Chosen (and it works just fine).
But I am using the [nothing selected] state as an All-Selected state (see code below):

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

( fiddle: http://fiddle.jshell.net/zc83L1d5/ )

While I can add an option for "all", it creates a problem because "all" can be selected in combination with any of the other options.

Like I said - functionally, it works fine. It just looks wrong when an item is selected and then unselected because the word "All" goes away.

Any ideas on how to get it back?

Answer 1

Actually, when you click outside the dropdown after unselecting all options, the word "All" returns again.
It's only because the input-field has focus, that the placeholder "All" isn't showing.

When you keep this in mind, all you have to do to get the placeholder showing again, is let the input-field lose focus when it becomes empty after interaction.

---

Code snippet (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> 

( fiddle: http://fiddle.jshell.net/zc83L1d5/2/ )

• In my code, I just trigger a click on the body element to unfocus from the input-field (even though the cursor is still blinking inside of it). This is not the most elegant solution, but I tried other things like $(this).blur(); , and nothing worked for me... Maybe you can find another way to remove the focus without having to involve other elements.
• I had to increase the jQuery version (changed it to the highest), because v1.6.4 doesn't recognize .on("input change propertychange" .
• I removed the function wrapping $(".chosen-select").chosen(); , because it is not necessary.
• I changed multiple="" to multiple="multiple" , because this is just good practice: In XHTML, attribute minimization is forbidden, and the multiple attribute must be defined as <input multiple="multiple" /> .