ساخت dropdownlist بصورت چند گزینه ای در بوت استرپ ۴ (multiselect)

در بوت استرپ بدون پلاگین و یا بدون بوت استرپ میتوان دراپ دان طراحی کرد که قابلیت انتخاب چند گزینه را داشته باشد اما در این حالت معمول کار با این دراپ دان برای کاربر مشخص نیست و برای انتخاب چند گزینه باید در زمان انتخاب گزینه دوم کاربر دکمه ctrl را نگه دارد.

برای اینکار در دراپ داون  پروپرتی  multiple را به شکل زیر تعریف میکنیم .

<select name="day" multiple>
<option value="1">شنبه</option>
<option value="2"> یکشنبه</option>
<option value="3">دوشنبه</option>
<option value="4">سه شنبه</option>
<option value="5">چهارشنبه</option>
<option value="6">پنج شنبه</option>
<option value="7">جمعه</option>
</select>

با این کدها ظاهر دراپ دان به شکل زیر خواهد شد.

 

دراپ دان چند گزینه ای

برای اینکه ظاهر این دراپ دان رو بهتر کنیم تا کاربرپسند تر بشه در بوت استرپ ۴ میتونیم از پلاگین BsMultiSelect  استفاده کنیم.

استفاده از این پلاگین نیاز به دو فایل به نام ها  BsMultiSelect.min.css  و BsMultiSelect.min.js دارد که در پایین میتوانید دانلود کنید

 

 

فایل BsMultiSelect.min.css رو در قسمت هدر پایین تر از  فایل های CSS بوت استرپ فراخوانی میکنیم و فایل BsMultiSelect.min.js  رو هم در قسمت فوتر سایت پایین تر از فایل های جاوا اسکریپت بوت استرپ و جی کوئری قرار می دهیم.

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

<select name="day" id="multidayselect" class="form-control"  multiple="multiple" style="display: none;">

    <option value="1">شنبه</option>
    <option value="2"> یکشنبه</option>
    <option value="3">دوشنبه</option>
    <option value="4">سه شنبه</option>
    <option value="5">چهارشنبه</option>
    <option value="6">پنج شنبه</option>
    <option value="7">جمعه</option>
  
</select>

 

در مرحله بعدی باید پلاگین را برای دراپ دانی که میخواهیم فعال کنیم برای این کار در فوتر پایین تر از همه اسکریپ ها کد زیر را قرار میدهیم.

 

<script>
$("#multidayselect").bsMultiSelect();
</script>

 

نتیجه :

 

 

 

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *