chosen allow_single_deselect is not working as expected

问题

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?

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

回答2:

I would try to make the option not really empty but leave some whitespace in it, or even something like '(none)' or '(choose one).'

回答3:

oops my bad, the path to sprite image that shows close button on select was not correct due to which close button (cross symbol) was not displayed on drop-down and felt like blank is not working

回答4:

I have not used the Chosen plugin before but I looked at the website, the very first example has an empty option and the Chosen function gets rid of it when called. Also the allow_single_deselect option says that it will "add a UI element for option deselection" which doesn't mean it preserves empty options.

回答5:

I know this post is old, but if any one still not able to figure this out. Here's what you need to do.

This is mentioned in the option 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
    });
});

I still cannot see the 'x'

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

chosen
|-- styles
|   |-- chosen.jquery.min
|   |-- chosen.min.css
|   |-- chosen-sprite.png // image
|   |-- chosen-sprite@2x.png // image

回答6:

Make sure you have an empty option both before and after updating the chosen.

Example:

//html
<select class="consultant_refer"><option></option></select>

//initialize
        $('.consultant_refer').chosen({width: '100%', allow_single_deselect: true})

//empty select but make sure to add another empty option
        $('.consultant_refer').empty().append('<option>')

//add other options
        consultants.forEach(function (data) {
             $('.consultant_refer').append($('<option>').val(data.id).text(data.name))
        })
        $('.consultant_refer').trigger('chosen:updated')

来源：https://stackoverflow.com/questions/32908574/chosen-allow-single-deselect-is-not-working-as-expected

标签

javascript

jquery-chosen