One can use Jquery Mutiselect plugin to allow user to select multiple items from the options available in dropdown. When we click on dropdown it looks something like below :

Check out the demo page of plugin here
The problem with the plugin is that it won’t remember the user selection and value will be lost on postback. For that you can store the selected valued delimited by comma in hidden field and restore the value on page load.
Now let’s look at the code to bind the dropdown with plugin and retaining value on postback.
Make sure you’ve necessary scripts and css files added in your page:
HTML:
Client Script:
Now to check checkboxes marked by user we need to add selected attribute to original select (dropdown) options and call refresh method of the plugin. You can do it as shown in below scripts:
I hope it helps!
Check out the demo page of plugin here
The problem with the plugin is that it won’t remember the user selection and value will be lost on postback. For that you can store the selected valued delimited by comma in hidden field and restore the value on page load.
Now let’s look at the code to bind the dropdown with plugin and retaining value on postback.
Make sure you’ve necessary scripts and css files added in your page:
<link href="CSS/Jquery.multiselect.css" rel="stylesheet" type="text/css" /> <link href="CSS/Jquery.multiselect.filter.css" rel="stylesheet" type="text/css" /> <link href="CSS/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <script type="text/javascript" src="Js/jquery-ui.min.js"></script> <script type="text/javascript" src="Js/Jquery.multiselect.js"></script> <script src="JS/Jquery.multiselect.filter.js" type="text/javascript"></script>
<asp:DropDownList ID="ddlUsers" runat="server" multiple="multiple"> </asp:DropDownList> <asp:HiddenField ID="hdnUsers" runat="server" /> <asp:Button ID="btnSearch" runat="server" Text="Search" onclick="btnSearch_Click" />
<script type="text/javascript">
$('#<%= ddlUsers.ClientID %>').multiselect({
//to remove check/uncheck all option
header: '',
//store user selected value in hidden field
close: function (event, ui) {
var array_of_SalesGroup = $('#<%= ddlUsers.ClientID %>').multiselect("getChecked").map(function () {
return this.value;
}).get();
$('#<%= hdnUsers.ClientID %>').val(array_of_SalesGroup);
}
}).multiselectfilter(); //adds filter to dropdown
</script>
Now to check checkboxes marked by user we need to add selected attribute to original select (dropdown) options and call refresh method of the plugin. You can do it as shown in below scripts:
$(document).ready(function () {
if ($('#<%= hdnUsers.ClientID %>').val() != '') {
var selected = $('#<%= hdnUsers.ClientID %>').val().split(",");
$("#<%=ddlUsers.ClientID%> > option").each(function () {
if ($.inArray(this.value, selected) > -1) {
$(this).attr("selected", "selected");
}
});
$("#<%=ddlUsers.ClientID%>").multiselect('refresh');
}
});
I hope it helps!