Add values to a chosen multiselect

问题

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 saying this is possible. He links to an example and a fork on github, but I've had some difficulties implementing those.

The source code is written in CoffeeScript. I've tried compiling it (using an online compiler) to regular JavaScript, copy pasted the code into a blank test project but I got errors. After that, I've loaded The AbstractChosen and SelectParser as well (compiled them to js) and didn't get errors, but the 'add items on the fly' functionality is not there (although i initialized the chosen described in the aforementioned link).

Has anybody worked with this fork? If yes, could you please share your experiences with it?

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

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

Edit

Or for your convenience, download a compiled release.

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

回答3:

The solution is here

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

$(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
  });
});

来源：https://stackoverflow.com/questions/18201254/add-values-to-a-chosen-multiselect

标签

javascript

jquery-chosen