Ajax调用后multiselect无法正常工作

Question

I have a situation where i have to use multiselect for selecting a number of values from a dropdown,That dropdown is a dependend drop down ie on top of the drop down there is another dropdown which is supplying a list of values,when we click on that dropdown and select some value then on the basis of that value the below dropdown will generate.Now the problem is that the multiselect is comeing for the first time,but when i selecting the values from the 1st dropdown then the time creation of the second dropdown the multiselect is not working.I am giving my code here ,

//responsible for multiselet
$("#candyListIntAva").multiselect({
    disableIfEmpty: true,
});


//The first dropdown
$('#JobList').change(function (){

    //alert($('#JobList').val());

    var url = "<%=fetchCandidateByIdURL%>";
    var type = "fetchCandidate";
    var jobId = $('#JobList').val();

     jQuery.getJSON(url+"&jobId="+jobId+"&type="+type, function(data) { 

      //Inside this funtion the result is coming  i am appending the data to a div    
        $("#loadCandidate").html(data.searchResultArray);
   });

}); 

This is the HTML section

<table align="center">
<tr>
  <td class="interviewParams">Select Job ID</td>

<td class="interviewfields">
<select id="JobList" name="JobList">
        <option value="None">- Select Job ID -</option>
        <%
            while (rs.next()) {
                String jobid = rs.getString("jobOrderID");
        %>
        <option value="<%=jobid%>"><%=jobid%></option>
        <%
            }
        %>
    </select>

  </td>
 </tr>
 <tr>
<td class="interviewParams">Select Candidate</td>
<td class="interviewfields">
<div id="loadCandidate">
                 <select id="candyListIntAva" name="candyListIntAva" multiple="multiple">
                       <option value="None">--Select Candidate--</option>
                 </select>
          </div>

and this is the code by which i am taking out the data from server side

            rsServeResource = st.executeQuery(SQL);
            String generateOption = "";
            generateOption="<select id=\"candyListIntAva\" name=\"candyListIntAva\">";  
            generateOption+="<option value='None'>--Select Candidate--</option>";

            while (rsServeResource.next()) {  
                generateOption+="<option value=\'"+rsServeResource.getString(2)+"\'>"+rsServeResource.getString(1)+"</option>";  
           }  
           generateOption+="</select>";

           searchResultArray.put(generateOption);   
        jsonFeed.put("searchResultArray", searchResultArray);
        resourceResponse.setContentType("application/json");
        resourceResponse.setCharacterEncoding("UTF-8");
        resourceResponse.getWriter().write(jsonFeed.toString());

Now the problem is that i am applying the multiselect function to the candyListIntAva,but the callback is taking the data i am appending it a loadCandidate div.But if we apply candyListIntAva in both places then the second list will not be populated.But i also have to append the data to the div also.Can anyone tell me what is the solution??

Answer 1

use like below its working fine for me.

$('#csv_head').html('<select id="optgroup" class="ms" multiple="multiple" >'+data.header_arr+'</select>');

$('#csv_head').multiSelect({ selectableOptgroup: true });

Note:- 1. where csv_head is your div id and data.header_arr is your option string received from ajax call.

2. option string should be like below