Thursday, 19 February 2015

Multi Select DropDown with CheckBox

Add the following Scripts

Add the Following Scripts

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

    <script type="text/javascript">
        $(function () {
            $('[id*=lsNames]').multiselect({
                includeSelectAllOption: true
            });
        });
    </script>



<asp:ListBox ID="lsNames" runat="server" SelectionMode="Multiple">
        <asp:ListItem Text="a" Value="1" />
        <asp:ListItem Text="b" Value="2" />
        <asp:ListItem Text="c" Value="3" />
        <asp:ListItem Text="d" Value="4" />
        <asp:ListItem Text="e" Value="5" />

    </asp:ListBox>
       <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />


on button click 
write the following code

string message = "";
        foreach (ListItem item in lsNames.Items)
        {
            if (item.Selected)
            {
                message += item.Text + " " + item.Value + "\\n";
            }
        }
        ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true);


Output




No comments:

Post a Comment