I am using chosen jquery in select in my lightning component but options are not getting populated in dropdown. My code: component:

<select class='slds-select ranklevel' name='Rank Level'  multiple="false" value="{!v.selectedField}">
 <aura:iteration items="{!v.fieldsList}" var="columnsList">
      <option value="{!columnsList.fieldName}" text="{!columnsList.fieldName}"></option>


var $j = jQuery.noConflict(); 
        width: '95%', create_option: true, persistent_create_option: false, skip_no_results: true});

I have included all the static resource file needed for chosen and jquery to function

2 Answers 2


I think your problem here is that "text" is not a valid attribute of the html tag, so you may be getting a load of blank options? You probably want something like this instead:

<select class='slds-select ranklevel' name='Rank Level'  multiple="false" value="{!v.selectedField}">
    <aura:iteration items="{!v.fieldsList}" var="columnsList">
        <option value="{!columnsList.fieldName}">

Also, as an aside, looking at the latest version of the chosen jquery plugin (this one: https://harvesthq.github.io/chosen/) it looks as though neither create_option nor persistent_create_option nor skip_no_results are valid parameters to pass when instantiating? This is a list of available parameters for the current version: https://harvesthq.github.io/chosen/options.html but then I guess if you're using an older version you may well be ok!

  • I used the same but still options are not getting loaded.
    – Jill_sfdc
    Jan 17, 2018 at 17:44
  • @Jill_sfdc Hmm, where are the items in the fieldsList attribute being populated? Can you print them to debug / console somewhere so you can be sure that the data at least is there?
    – TomB
    Jan 18, 2018 at 10:19
  • I used select2 of jquery and was able to acheive it. Thanks
    – Jill_sfdc
    Jan 20, 2018 at 13:47

I am also facing the same problem, But got a solution after the lot of R&D

Problem is in remote action, It takes some time to fetch data from the controller because of its an asynchronous call, But chosen plugin javascript doesn't wait for the controller response that's why you are facing this problem.

Solution:- you have to change your controller as shown below, I set 500 millisecond time to load the chosen plugin.

doInit: function(component, event, helper) {
         var action = component.get('c.getAppName');
         action.setCallback(this, function(response) {
        var state = response.getState();
             if (component.isValid() && state === "SUCCESS") {
                 component.set("v.accounts", response.getReturnValue());
                 // when response successfully return from server then apply chosen plugin after 500 milisecond
                        search_contains: true,
                        width: "80%"

                }, 500);  


enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .