chosen-change-add-empty-option

by Akram kamal

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<select id="chosen-without-empty" class="chosen">
    <option value="2">example</option>
    <option value="3">example 2</option>
</select>
<br />
<select id="chosen-with-empty" class="chosen">
    <option value="1"></option>
    <option value="2">example</option>
    <option value="3">example 2</option>
</select>

JavaScript

$('.chosen').chosen({
    width: '50%',
    allow_single_deselect: true
});
$('.chosen').empty().trigger('chosen:updated');

$('#chosen-without-empty').append($("<option/>", {
        value: "1",
        text: ""
    }));
$('#chosen-without-empty').append($("<option/>", {
        value: "2",
        text: "2"
    }));
$('#chosen-without-empty').append($("<option/>", {
        value: "3",
        text: "3"
    }));
$('#chosen-with-empty').append($("<option/>", {
        value: "1",
        text: ""
    }));
$('#chosen-with-empty').append($("<option/>", {
        value: "2",
        text: "2"
    }));
$('#chosen-with-empty').append($("<option/>", {
        value: "3",
        text: "3"
    }));
$('.chosen').trigger('chosen:updated');