[RESOLVED]How to create multi select drop-down using jQuery?

Hi All,

How to create multi select drop-down using jQuery? Please provide some code or link for this

Thanks in advance


Try following link


<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <title>Multi Select</title>
  div {
    color: blue;
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<select name="Number" multiple="multiple">
  <option selected="selected">1</option>
  <option selected="selected">2</option>
      .change(function () {
          var str = "";
          $("select option:selected").each(function () {
              str += $(this).text() + " ";



Hi info2ambrish,

Thanks for your post.

The Dropdown list in ASP.NET is used to select a single item from the list. so if you need to imitate the select tag and add the javascript function for multi selected.

But you can use the multi selected jquery plugin for your requirement.

Please double check the following link


how to set selected values to a multi select dropdown list on form load in .net mvc

jQuery MultiSelect dropdownlist how to access results?


Hope this can be helpful.

Best Regards,


Hi Eileen,

Thanks sharing these useful url and it is very help full for me

You can also check the DropdownChecklist Jquery Plugin

Please see the Sample Implementation code 

<!DOCTYPE html>
    <link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.min.css"
        rel="stylesheet" type="text/css" />
    <link href="http://dropdown-check-list.googlecode.com/svn/trunk/src/ui.dropdownchecklist.themeroller.css"
        rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
    <script src="http://dropdown-check-list.googlecode.com/svn/trunk/doc/ui.dropdownchecklist-1.4-min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#s2").dropdownchecklist({ emptyText: "Please select ...", width: 150 });
    <meta charset="utf-8">
    <title>JS Bin</title>
    <select id="s2" multiple="multiple">

Leave a Reply