سلام، خوش آمدید!
الگوی داشبورد کسب و کار شما
جعبه‌های انتخاب واحد
Select2 می تواند یک جعبه انتخاب معمولی مانند این را بگیرد...
جعبه های چند انتخابی
Select2 همچنین از جعبه های انتخاب چند ارزشی پشتیبانی می کند. انتخاب زیر با چند برابر اعلام می شودattribute.
گروه های گزینه کشویی
در اچ تی ام ال، <option>عناصر را می توان با قرار دادن آنها در
یک <optgroup>عنصر گروه بندی کرد :
غیرفعال کردن گزینه ها
Select2 به درستی گزینه های غیرفعال را هنگامی که disabledویژگی تنظیم می شود مدیریت می کند ) و از srouces راه دور که شی disabled: trueتنظیم شده است.
غیرفعال کردن یک کنترل Select2
Select2 به disabledویژگی روی <select>عناصر پاسخ می دهد . همچنین می توانید Select2 را با disabled: trueهمان افکت مقداردهی اولیه کنید.
با برچسب ها انتخاب کنید
شما می توانید و باید از <label>با Select2 استفاده کنید ، درست مانند هر <select>عنصر دیگری .
عرض کانتاینر
دو کادر Select2 زیر به ترتیب به 50%و 75%عرض استایل داده شده اند تا از طراحی واکنشگرا پشتیبانی کنند:
تم ها
Select2 با استفاده از این themeگزینه از تم های سفارشی پشتیبانی می کند تا بتوانید به Select2 استایل دهید تا با بقیه برنامه خود مطابقت داشته باشد.
Ajax (داده های راه دور)
Select2 با استفاده از متدهای AJAX جی کوئری با پشتیبانی AJAX ساخته شده است. در این مثال، می‌توانیم مخازن را با استفاده از API GitHub جستجو کنیم:
در حال بارگیری داده های آرایه
می توانید از dataگزینه پیکربندی برای بارگیری گزینه های کشویی از یک آرایه محلی استفاده کنید.
انتخاب خودکار
Select2 را می توان طوری پیکربندی کرد که با استفاده از این selectOnCloseگزینه به طور خودکار نتیجه هایلایت شده فعلی را هنگامی که بازشو بسته می شود انتخاب کند:
پس از انتخاب باز بماند
Select2 هنگامی که یک عنصر انتخاب می شود، به طور خودکار پنجره کشویی را می بندد، مشابه کاری که با یک جعبه انتخاب معمولی انجام می شود. closeOnSelectهنگام انتخاب نتیجه، می‌توانید از
این گزینه برای جلوگیری از بسته شدن فهرست کشویی استفاده کنید:
قرار دادن کرکره ای
این dropdownParentگزینه به شما امکان می دهد یک عنصر جایگزین را برای منوی کشویی انتخاب کنید تا به آن اضافه شود:
محدود کردن تعداد انتخاب ها
جعبه‌های انتخاب چند ارزشی Select2 می‌توانند محدودیت‌هایی را در مورد حداکثر تعداد گزینه‌های قابل انتخاب تعیین کنند. انتخاب زیر با multipleویژگی with
maximumSelectionLengthدر گزینه های select2 اعلام می شود.
ایجاد گزینه پویا
علاوه بر یک منوی از پیش پر شده از گزینه ها، Select2 می تواند به صورت پویا گزینه های جدیدی را از ورودی متن توسط کاربر در کادر جستجو ایجاد کند. این ویژگی "برچسب" نامیده می شود. برای فعال کردن برچسب
گذاری، tags گزینه را روی true:
برچسب گذاری با جعبه های انتخاب چند ارزشی
همچنین می‌توان از برچسب‌گذاری در جعبه‌های انتخاب چند ارزشی استفاده کرد. در مثال زیر، multiple="multiple"ویژگی را بر روی یک کنترل Select2 تنظیم می کنیم که آن را نیز
tags: trueفعال کرده است :
متغیرهایی را انتخاب کنید
Select2 از نمایش مقدار مکان نگهدار با استفاده از placeholderگزینه پیکربندی پشتیبانی می کند. مقدار مکان نگهدار تا زمانی که انتخابی انجام شود نمایش داده می شود.
متغیرهایی را چند انتخاب کنید
برای چند انتخاب، شما باید نه خالی اند <option>عنصر:
متغیرهای انتخاب پیش فرض
متناوبا، مقدار placeholderگزینه می تواند یک شی داده ای باشد که یک انتخاب پیش فرض را نشان می دهد ( <option>). در این مورد idشی داده باید
valueبا انتخاب پیش فرض مربوطه مطابقت داشته باشد.
سفارشی کردن نحوه مطابقت نتایج
هنگامی که کاربران با وارد کردن عبارات جستجو در کادر جستجو، نتایج را فیلتر می کنند، Select2 از یک "مطابق" داخلی برای مطابقت عبارات جستجو با نتایج استفاده می کند. می‌توانید روشی را که Select2
با عبارات جستجو مطابقت می‌دهد، با تعیین یک تماس برای matcherگزینه پیکربندی سفارشی کنید.
تطبیق گزینه های گروه بندی شده
فقط اشیاء سطح اول به matcherفراخوان ارسال می شوند. اگر با داده های تودرتو کار می کنید، باید از طریق childrenآرایه تکرار کنید و آنها را به صورت جداگانه مطابقت دهید. این
امکان تطبیق پیشرفته تری را هنگام کار با اشیاء تودرتو فراهم می کند و به شما امکان می دهد هر طور که می خواهید آنها را مدیریت کنید.
حداقل طول عبارت جستجو
با استفاده از این minimumInputLengthگزینه می توانید حداقل طول عبارت جستجو را تعیین کنید:
حداکثر طول عبارت جستجو
با استفاده از این maximumInputLengthگزینه می توانید حداکثر طول عبارات جستجو را محدود کنید:
به صورت برنامه ای گزینه های جدید اضافه کنید
با ایجاد یک Optionشی جاوا اسکریپت جدید و الحاق آن به کنترل، می‌توان گزینه‌های جدیدی را به صورت برنامه‌نویسی به یک کنترل Select2 اضافه کرد:
اگر وجود ندارد ایجاد کنید
می‌توانید .findبرای انتخاب گزینه‌ای که قبلاً وجود دارد، استفاده کنید و در غیر این صورت آن را ایجاد کنید:
استفاده از انتخابگر جی کوئری
از طریق :selectedانتخابگر jQuery نیز می توان به موارد انتخابی دسترسی داشت :
پشتیبانی از RTL
Select2 روی وب‌سایت‌های RTL کار می‌کند اگر dirویژگی روی آن تنظیم شده باشد <select>یا
هر یک از والدین آن همچنین می توانید Select2 را باdir: "rtl" گزینه پیکربندی
از بین بردن کنترل Select2
این destroyروش ویجت Select2 را از عنصر هدف حذف می کند. به یک selectکنترل استاندارد باز می گردد :
باز کردن منوی کشویی
Select2 هنگام انجام اقدامات مختلف با استفاده از کامپوننت، چند رویداد مختلف را راه‌اندازی می‌کند و به شما امکان می‌دهد قلاب‌های سفارشی را اضافه کنید و اقداماتی را انجام دهید.
باز کردن/بستن کشویی
Select2 هنگام انجام اقدامات مختلف با استفاده از کامپوننت، چند رویداد مختلف را راه‌اندازی می‌کند و به شما امکان می‌دهد قلاب‌های سفارشی را اضافه کنید و اقداماتی را انجام دهید.
2 روش را انتخاب کنید
Select2 چندین روش داخلی دارد که امکان کنترل برنامه ای کامپوننت را فراهم می کند.
2 روش را انتخاب کنید
Select2 چندین روش داخلی دارد که امکان کنترل برنامه ای کامپوننت را فراهم می کند.