chosen allow_single_deselect is not working as expected

Question

Below is my markup, i have empty option included in my markup

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

Any my js is like

$('.single').chosen({allow_single_deselect:true});

but i don't see blank option in drop-down after initialization, am I doing something wrong?

Answer 1

This normally happens if you are using a dynamic dropdown. The deselect will work fine after initialization. Once you empty the dropdown and fill it with new values and chosen:update it. You won't see the chosen allow_single_deselect option not working. If anyone looking for invisible chosen deselect option

Refer: https://github.com/harvesthq/chosen/issues/1780

You need to add an empty option tag before you fill the drop-down will new values. If you miss an empty <option> before the actual drop-down values you will not see the deselect cross mark icon.

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

I know this post is old, but if any one still not able to figure this out. Here's what you need to do. Documented: https://harvesthq.github.io/chosen/options.html

When set to true on a single select, Chosen adds a UI element which selects the first element (if it is blank).

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

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

Missing 'x'?

Make sure you have included the sprites in the 'same location'.

chosen
|-- styles
|   |-- chosen.jquery.min
|   |-- chosen.min.css
|   |-- chosen-sprite.png // image
|   |-- [email protected] // image