jQuery Chosen plugin add options dynamically

jquery chosen select option programmatically
jquery chosen multiple select example
jquery chosen options
multi select chosen option jquery
jquery chosen plugin dynamically populate list by ajax
chosen:updated
select box with search option in jquery without plugin
jquery-chosen multiselect get selected values

I make a jQuery Chosen drop-down like this:

$('.blah').chosen();

I can't find how I can add options, something like:

$('.blah').chosen('add', name, value);

First, you need to add the <option>s to the <select> that Chosen was bound to. For example:

$('.blah').append('<option value="foo">Bar</option>');

Then, you need to trigger the chosen:updated event:

$('.blah').trigger("chosen:updated");

More information can be found here (although you need to scroll down to Change / Update Events).


Update 7th August 2013

The event name has changed to chosen:updated since version 1.0 (July 2013) as Tony mentions in the comments. The updated documentation can be found here.

How to add a new options to JQuery Chosen Plugin Dynamically , How to add a new options to JQuery Chosen Plugin Dynamically. $("#users"). append('<option value="1">User</option>'). trigger("chosen:updated"); Created OnMarch 21, 2018byIan Carnaghan Knowledge Base Web Development jQuery How to add a new options to JQuery Chosen Plugin Dynamically If users is the id of the select Chosen dropdown box, then use JQuery to append new options dynamically as in the example below $("#users").append(' User ').trigger("chosen:updated"); .trigger(“chosen:updated”); refreshes the Chosen dropdown box with the new option.

newest chosen version changed the event name to "chosen:updated"

so your code will be like this:

$('.blah').append("<option value='"+key+"'>"+value+"</option>");
$('.blah').val(key); // if you want it to be automatically selected
$('.blah').trigger("chosen:updated");

Dynamically adding data to select using jQuery chosen plugin , I am facing a problem of dynamically adding options to multiple select using chosen plugin. As I have millions of records in database so I can  Step 1: Add jQuery and chosen jQuery JS file Step 2 : Call dropdown initialize functions (i.e for Chosen) Step 3 : HTML for dropdown.you must need to add name as array category[] and add multiple attribute in select element. Div of #show_location currently I set as display:none I want to visible state only when selected value of category have

You can call this function to add element to chosen after you save the element to server using Ajax:

function appendToChosen(id,value){
    $('.blah')
        .append($('<option></option>')
        .val(id)
        .attr('selected', 'selected')
        .html(value)).trigger('liszt:updated');
}

Ajax call:

$.ajax({
    type: 'POST',
    url: 'savepage.php',
    data: $('#modal-form form').serialize(),

    success: function(data, status) {
        appendToChosen(data[0],data[1]);
    },
    error: function (response) {
        alert(response);
    }
    }).always(function(data, status) {
        //hide loading
    });

How to show dynamically chosen option what am I missing , I'm trying to dynamically set a selected option. I wrapped it all up into this little plugin: $.fn. Add this line at line 195 in jquery.chosen.js : Chosen supports right-to-left text in select boxes. Add the class chosen-rtl to your select tag to support right-to-left text options. Note: The chosen-rtl class will pass through to the Chosen select even when the inherit_select_classes option is set to false. Note: This is deprecated in favor of using the rtl: true option (see the Options section).

Try this..

         $.ajax({
            url: "@Url.Action("Actionname", "Controller")",
            data: { id: id },
                dataType: "json",
                type: "POST",
                success: function (data) {
                $("#id_chzn .chzn-results").children().remove();
                var opts = $('#id')[0].options;
                    $.map(data, function (item) {
                        var text = item.text;
                        for (var i = 0; i < opts.length ; i++) {
                            var option = opts[i];
                            var comparetext = option.innerText;
                            var val = 0;
                            if(text == comparetext)
                            {
                                val = option.index;
                                $('#id_chzn .chzn-results').append("<li id='id_chzn" + val + "' class='active-result' style>" + item.text + "</li>");
                            }
                        }
                    });
                  }
                });

Adding new values to chosen plugin – Boundless Journey, Chosen is a jQuery Plugin, which gives some beautifully looking multiple The select can have some options populated, and the user can select one or I wanted to allow the user to add his own values to the list dynamically. Allow Deselect on Single Selects. When a single select box isn't a required field, you can set allow_single_deselect: true and Chosen will add a UI element for option deselection. This will only work if the first option has blank text.

I used below code to update choosen dropdown options dynamically and it works:

var myDropDownOptionHtml ='<option value="0">--Customer--</option>'; 

$('#myDropdownId').html(myDropDownOptionHtml );
setTimeout(function() {
    $("#myDropdownId").trigger("liszt:updated");
},100);

FYI, I am using jQuery Chosen Version 0.13.0

Happy Coding!

Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes, Chosen automatically highlights selected options and removes disabled When a single select box isn't a required field, you can set allow_single_deselect: true and Chosen will add a UI element for option Updating Chosen Dynamically. I am using the jQuery plugin chosen (by Harvest). It is working fine on (document).ready, but I have a button that, when clicked, uses ajax to dynamically create more select objects that I want to use the "chosen" feature. However, only the original select elements have the "chosen" features, and the new (dynamically created) do not work.

Modify Jquery Chosen select options dynamically., Undoubtedly, every web developer would admit that Jquery Chosen plugin is a big time saver for them. It's not only saving the time, but it takes  I am facing a problem of dynamically adding options to multiple select using chosen plugin. As I have millions of records in database so I can not populate all as options during page load. so now I have to get matching records (on keyup event) from database using ajax and populate select box dynamically. is there any way i can achieve this.

jQuery Chosen plugin, I am going to Write regarding jQuery Chosen plugin. What is the reason by step solution: Step1 :: Add jQuery and chosen jQuery JS file ? jQuery(document).ready(function(){ jQuery(".chosen").chosen(); }); The plugin detects the multiple designation and creates a Facebook-style display, otherwise creates a standard-looking SELECT element with search capabilities.

jQuery Chosen Plugin, Better yet, Chosen is available for both jQuery and Prototype. for its construction, so create your SELECT and OPTION elements as usual: to chosen plugin, user need a permission to add item dynamically in multi select :(. Include jQuery JavaScript library and the Chosen's files on the webpage. Just attach the plugin to the existing select element and you're done. Call the plugin and we're done. Possible options to customize the plugin.

Comments
  • @Mike Sorry about that ;) it happens to me all the time!
  • Starting with version 1.0 which the trigger is now "chosen:updated". See harvesthq.github.io/chosen/#change-update-events
  • I suggest you update your answer by replacing $('.blah').trigger("liszt:updated"); with $('.blah').trigger("chosen:updated"); - because people like me read the code only
  • @lonelyloner Thanks, I've updated the code examples in my answer
  • This works for me. But the following code does not work ($('.blah').trigger("liszt:updated");).
  • this replaces the existing tags. @TotPeRo's amswer worked for me