Question

I’m using Eric Hynds jquery API for jQuery UI MultiSelect-dropdown Widget

I’m having one dropdown which selects job category (multiselect) It takes effects of included api script.

On each select from dropdown i’m making a jQuery ajax request to find job rolls for a particular category. And again displaying those job rolls in dropdown to give multiselect effect of jquery API. But that generated dropdown won’t take effect of multiple dropdown as first dropdown. I have done all necessary things like initializing API call for that generated dropdown.

Here is the code:

$(function(){
    $("#job_locations, #industries, #job_functions, #roll_list").multiselect({
        noneSelectedText: "Select an Option",
            selectedText: "# of # checked"
        }).multiselectfilter();
     }); 

#job_locations, #industries, #job_functions takes the effect of API but generated dropdown #roll_list won’t take that effect. This ids are given to <select> tag

Third dropdown is not cating the effects

Is there something like generated result won’t catch the effect of already loaded script?

Edit:
The php code i’m using to print ajax response

$select=' <select id="roll_list" name="roll_list[]"   multiple="multiple">';
    foreach($array as $function_name=>$roll_array){
        $select.="<optgroup label='".$function_name."'>";
        foreach($roll_array as $index=>$roll_info){
            $select.="<option value='".$roll_info['role_id']."'>".$roll_info['role_name']."</option>";
                        }
        $select.="</optgroup>";
        }
    $select.="</select>";

    echo $select;

HTML code:

<select id="roll_list" name="roll_list[]" class="multi_select_dropdown" multiple="multiple" onchange="dispInventry();" style="width: 400px;">
<optgroup label="Customer Service/ Call Centre/ BPO">
<option value="14">Fresher</option>
<option value="15">Trainee/ Management Trainee</option>
<option value="16">Technical Support Executive ( voice)</option>
<option value="17">Technical Support Representative (Non- v)</option>
<option value="46">External Consultant</option>
</optgroup>
</select>

I’m i doing something wrong? How to tackle this? I can provide all necessary code if needed.
Thanx in advance

Answer 1

make

function create_mutisilect() {


    $("#job_locations, #industries, #job_functions, #roll_list").multiselect({
        noneSelectedText: "Select an Option",
            selectedText: "# of # checked"
        }).multiselectfilter();
    

}

it a separate function out side document.ready and

1.call it in document.ready

2.call it after your ajax call

$(document).ready(function(){

create_mutisilect();//1


$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);

ceate_mutisilect();//2

  }
});


});