[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

Hi,

Try following link

http://api.jquery.com/change/

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

Regards,

Ajay

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

http://rvieiraweb.wordpress.com/2013/04/20/mvc-4-dropdownlist-with-multiselect-values/

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

jQuery MultiSelect dropdownlist how to access results?

http://blogs.msdn.com/b/rickandy/archive/2012/01/30/asp-net-mvc-dropdownlist-multiselect-and-jquery.aspx

Hope this can be helpful.

Best Regards,

Eileen

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>
<html>
<head>
    <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 });
        });
    </script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <select id="s2" multiple="multiple">
        <option>Low</option>
        <option>Medium</option>
        <option>High</option>
    </select>
</body>
</html>

Leave a Reply