Add values to a chosen multiselect

Question

I am wondering whether it\'s possible to add new values on the fly to a chosen.js multiselect (similar to how tagging works).

I\'ve seen in another SO post a user s

Answer 1

The problem you have is because you haven't follow the steps in the documentation:

If you download the source, install the correct packages and run the build commands you end with a chosen.jquery.js, chosen.proto.js and chosen.css.

So the following steps should do it for you:

1. Download: https://github.com/koenpunt/chosen/archive/option_adding.zip
2. Install packages: npm install && gem install bundler && bundle install
3. Run build: grunt build (note, for this you'll need the grunt cli)

Edit

Or for your convenience, download a compiled release.

Answer 2

the documentation mentions this option:

Updating Chosen Dynamically

If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

with this.

$("#form_field").trigger("chosen:updated");

This can be combined with

// Add field
$("#form_field").append("<option>Utopia</option>");

$("#form_field").trigger("chosen:updated");

Adding this together to an example can be found at the jsfiddle: http://jsfiddle.net/E5X9x/

Answer 3

The solution is here

$('select').chosen({plugins: ['option-adding']});

or

$(function() {
  $(".chzn-select").chosen({
    create_option: true,
    // persistent_create_option decides if you can add any term, even if part
    // of the term is also found, or only unique, not overlapping terms
    persistent_create_option: true,
    // with the skip_no_results option you can disable the 'No results match..' 
    // message, which is somewhat redundant when option adding is enabled
    skip_no_results: true
  });
});