CODEWITHSUNDEEP
javascriptjqueryjquery-chosen
rumplestilskin
rumplestilskin

Reputation: 272

Applying Chosen.js to dynamically created dropdown

I am having some trouble using the chosen.js plugin on my dropdown.There are a few related questions on here that I have worked through but still no luck on my code.

I have 4 dynamically created and populated select elements. 

var dropdownArray = [];

function initDropdown() {

var id = "list";
var classy= "chzn-select";
var html = "";

for ( var idcount = 0; idcount < 4; idcount++) {
    var dropdownHTML = "<select class=\""+classy+"\" id=\"" + id
            + "\" onchange= selectfunc(this) >" +

            "<option selected=\"selected\">Make Selection... </option>" +

            "</select>";

    dropdownArray.push(id);
    html += dropdownHTML;
    id += "0";
}

$("#dropdowns").html(html);
$(".chzn-select").chosen();
};

I have tried to use this line to apply Chosen.js to the elements by their class name chzn-select:

$(".chzn-select").chosen();

However I am getting the error : 

Uncaught TypeError: Object #<Object> has no method 'chosen' .

Sorry about the messy code, I am new to this.

any help would be much appreciated.

Upvotes: 4

Views: 6301

Answers (2)

mars-o
mars-o

Reputation: 1715

try this $("#list").trigger("chosen:updated");

got it from here

Upvotes: 0

Praveen
Praveen

Reputation: 56509

From your comments, you were trying to create a single SELECT with 4 options using chosen.js. Check out JSFiddle 1 for result.

From your question, you were trying to create 4 SELECT dynamically using chosen.js. Check out JSFiddle 2. The reason for error is you missed to point the right id (dropHolder).

Upvotes: 4

Related Questions