Jquery Chosen Plugin how can user clear out back to default value

Question

If I have

<select id="ddlplugin" data-placeholder="Choose Option..." style="width: 175px;" class="chzn-select">
    <option value="0"></option>
    <option value="1">Blue</option>
    <option value="2">Red</option>
</select>

Say the user goes in and chooses "red". they realize they didn't mean to answer this input and want to "blank" it out. Set it back to the blank value.

In a normal dropdown select they simply can choose the "blank" option I provided at the top of the list and they are on there way.

Chosen however, removes my blank option from the list. I have tried using spaces instead of an empty string. ti does the same thing. So the "blank" selection I provide can't be chosen, thus the user can't clear the answer in the control.

Is there a default that I can tell it to stop doing this? I have researched haven't found anything.

I have over a couple of hundred dropdowns for my application. I really do not want to have to create a X for remove on every single one just so the user can clear the entry. I am hoping that I don't have to modify plugin source by hand to do this... But that would be my next step.

Answer 1

You might want to check allow_single_deselect option which adds a X button to blank it out:

//script
$(".my_select_box").chosen({
  allow_single_deselect : true
});

//example html
<select class="my_select_box" data-placeholder="Pick a color..." 
 style="width:350px;" tabindex="1">
    <option value="0"></option>
    <option value="1">Blue</option>
    <option value="2">Red</option>
</select>

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

Source DOCS

Example FIDDLE