javascript - 类未应用于动态添加的下拉列表

Question

您好，我在单击按钮时添加了下拉列表，但样式未应用于该下拉列表

$(function() {
  $('.DropdownList').multiselect({
    includeSelectAllOption: true
  });

  $('#btnSelected').click(function() {
    var selected = $("#EmpList option:selected");
    var message = "";
    selected.each(function() {
      message += $(this).text() + " " + $(this).val() + "\n";
    });
    alert(message);
  });

  $('#btn').click(function() {
    $('#drpDownContainter').append("<select id=EmpList class=DropdownList multiple=multiple><option value=1>Navdeep-Asp.net</option><option value=2>Pankaj-C#</option><option value=3>Bikesh-Asp.Net</option><option value=4>Pritam-Salesforce</option><option value=5>Payal-Salesforce</option><option value=6>Sujata-SSRS</option><option value=7>Harikant-UI</option></select>");

  });

});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

<div>

  <input type="button" id="btn" value="Add" />

  <table>
    <tr>
      <td id="drpDownContainter">
        <select id="EmpList" class="DropdownList" multiple="multiple">
                    <option value="1">Navdeep-Asp.net</option>
                    <option value="2">Pankaj-C#</option>
                    <option value="3">Bikesh-Asp.Net</option>
                    <option value="4">Pritam-Salesforce</option>
                    <option value="5">Payal-Salesforce</option>
                    <option value="6">Sujata-SSRS</option>
                    <option value="7">Harikant-UI</option>

                </select>

        <select id="EmpList" class="DropdownList" multiple="multiple">
                    <option value="1">Navdeep-Asp.net</option>
                    <option value="2">Pankaj-C#</option>
                    <option value="3">Bikesh-Asp.Net</option>
                    <option value="4">Pritam-Salesforce</option>
                    <option value="5">Payal-Salesforce</option>
                    <option value="6">Sujata-SSRS</option>
                    <option value="7">Harikant-UI</option>

                </select>
      </td>
      <td><input type="button" id="btnSelected" value="Get Selected" /></td>
    </tr>
  </table>


</div>

以下是输出 output image

Answer 1

您需要将 .multiselect 应用于新添加的下拉列表，因为当您最初在页面加载时应用它时，新的下拉列表并未出现在页面上。

$('#btn').click(function () {

    var dropdown = $("<select class=DropdownList multiple=multiple><option value=1>Navdeep-Asp.net</option><option value=2>Pankaj-C#</option><option value=3>Bikesh-Asp.Net</option><option value=4>Pritam-Salesforce</option><option value=5>Payal-Salesforce</option><option value=6>Sujata-SSRS</option><option value=7>Harikant-UI</option></select>");
    $('#drpDownContainter').append(dropdown);
    dropdown.multiselect({
        includeSelectAllOption: true
    });

});

旁注:ID 应该是唯一的，并且您正在重复使用相同的 ID。