ajax调用后多选不起作用答案

【问题标题】：multiselect is not working after ajax callajax调用后多选不起作用
【发布时间】：2015-11-20 21:30:49
【问题描述】：

我有一种情况，我必须使用多选从下拉列表中选择多个值，该下拉列表是一个依赖下拉列表，即在下拉列表顶部有另一个下拉列表提供值列表，当我们单击该下拉列表并选择一些值，然后根据该值生成下面的下拉列表。现在的问题是多选是第一次出现，但是当我从第一个下拉列表中选择值时，时间创建在第二个下拉菜单中，多选不起作用。我在这里给出我的代码，

//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);
   });

});

这是 HTML 部分

<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>

这是我从服务器端取出数据的代码

            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());

现在的问题是我将多选函数应用于 candyListIntAva，但回调正在获取数据，我将其附加到 loadCandidate div。但如果我们在两个地方都应用 candyListIntAva，则不会填充第二个列表。但我也必须将数据附加到 div。谁能告诉我解决方案是什么？

【问题讨论】：

您在哪里将数据附加到select？并且您还记得在追加数据时重新初始化多选吗？
@Colin 我正在将数据动态附加到 loadCandidate div，我想在这里使用多选我将如何做到这一点？
$("#loadCandidate").multiselect({data.searchResultArray});不工作

标签： javascript jquery html ajax multi-select

【解决方案1】：

像下面这样使用它对我来说很好。

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

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

注意：- 1. 其中 csv_head 是您的 div id，data.header_arr 是您从 ajax 调用收到的选项字符串。

选项字符串应如下所示

【讨论】：