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