Twitter Bootstrap Question posted in

class not getting applied to dynamically added dropdown list-Twitter bootstrap

Hi i am adding dropdown list on button click but style not getting applied to that dropdown

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

following is the output
output image

Tags:

2

Answers


  1. 0

    You need to apply the .multiselect to the newly added dropdown because when you originally applied it on load of the page, the new dropdown wasn’t present on the page.

    $('#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
    });

});

    Side note: IDs should be unique and you are reusing the same ID.

    Login or Signup to reply.
  2. 0

    this might help

    $('#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>");

          $('.DropdownList').multiselect({
              includeSelectAllOption: true
          });
        });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search