در این مقاله قصد داریم نشان دهیم که چگونه می توان یک DropDownList به سبک Bootstarp با استفاده از افزونه Multi-select در jQuery ایجاد کرد که اجازه انتخاب چندگانه را به ما بدهد . کاربر می تواند با استفاده از checkbox چند گزینه را انتخاب کند و بجای DropDownList از Listbox استفاده خواهد شد.

در این مقاله قصد داریم نشان دهیم که چگونه می توان یک  DropDownList به سبک  Bootstarp با استفاده از افزونه  Multi-select در jQuery ایجاد کرد که اجازه انتخاب چندگانه را به ما بدهد . کاربر می تواند با استفاده از  checkbox چند گزینه  را انتخاب کند و بجای  DropDownList  از Listbox استفاده خواهد شد.

پلاگین Multi-select  را می توان از اینجا زیر دانلود کرد.

در صفحه  HTML کدها به صورت زیر خواهد بود.

 <asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple" >
        <asp:ListItem Text="توت فرنگی" Value="1" />
        <asp:ListItem Text="سیب" Value="2" />
        <asp:ListItem Text="موز" Value="3" />
        <asp:ListItem Text="نارنگی" Value="4" />
        <asp:ListItem Text="پرتغال" Value="5" />
         <asp:ListItem Text="نارگیل" Value="6" />
         <asp:ListItem Text="آناناس" Value="7" />
    </asp:ListBox>
    <asp:Button Text="ارسال" runat="server" OnClick="Submit" />

ابتدا باید فایلهای  JavaScript , CSS را در صفحه قرار داد. و پلاگین  jQuery Bootstrap Multi-Select را نیز به پروژه اضافه کرد و آن را درون Listbox بکار برد.

 در اینجا میخواهیم در لیست باز شونده گزینه " انتخاب همه"  را نیز بکار ببریم.

<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*=lstFruits]').multiselect({
            includeSelectAllOption: true
        });
    });
</script>

 واکشی متن و مقدار آیتم ها

در رویداد کلیک دکمه یک حلقه برای انتخاب کردن گزینه های  Listbox  می نویسیم که اگر مقدار  true  برگردانده شود آیتم انتخاب شده است، اگر false  باشد آیتم انتخاب نشده است.

کد های زیر در Codebehind  قرار میگیرند.

protected void Submit(object sender, EventArgs e)
{
    string message = "";
    foreach (ListItem item in lstFruits.Items)
    {
        if (item.Selected)
        {
            message += item.Text + " " + item.Value + "\\n";
        }
    }
    ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true);
}

خروجی به صورت زیر می باشد.

آموزش بوت استرپ