جعبه های تک انتخاب
سلکت 2 می توانید یک کادر انتخاب منظم مانند این را تهیه کنید...
جعبه های چند منتخب
سلکت 2 همچنین از جعبه های انتخاب چند ارزش پشتیبانی می کند.انتخاب زیر با چندگانه
اعلام شده است attribute .
گروه های گزینه کشویی
در اچ تی ام ال ، <option>
عناصر را می توان بسته بندی و گروه بندی کرد با
یک <optgroup>
عنصر:
گزینه های غیرفعال کردن
سلکت 2 گزینه های غیرفعال را به درستی کنترل می کند disabled
ویژگی تنظیم شده است) و از منابع از راه دور که در آن شیء دارد disabled:
true تنظیم شده.
غیرفعال کردن کنترل سلکت2
سلکت 2 به disabled
ویژگی در
<select>
عناصر.شما همچنین می توانید اولیه کنید سلکت 2 با
disabled: true
برای به دست آوردن همان اثر.
سلکت 2 با برچسب
شما می توانید و باید از آن استفاده کنید<label>
با سلکت 2, درست مثل هر <select>
عنصر کار کنید.
عرض کانتین
دو سلکت 2 در جعبه های زیر به سبک زیر است 50%
and 75%
به ترتیب برای پشتیبانی از طراحی پاسخگو:
مضامین
سلکت 2 از مضامین سفارشی با استفاده ازtheme
گزینه کار میکند بنابراین می توانید استایل کنید سلکت 2 را برای مطابقت با بقیه
برنامه خود.
اجاکس (داده های از راه دور)
سلکت 2 همراه با پشتیبانی اجاکس ساخته شده در داخل ، با استفاده از روش های اجاکس جی کوئری .در این مثال ، ما می توانیم با استفاده از ای پی ای گیت لب ، مخازن را جستجو کنیم:
بارگیری داده های آرایه
شما ممکن است از data
گزینه پیکربندی برای بارگذاری گزینه های کشویی از یک آرایه محلی.
انتخاب خودکار
سلکت 2 می توان پیکربندی کرد تا به طور خودکار نتیجه برجسته در حال حاضر را انتخاب
کند وقتی که کشویی با استفادهاز دکمه بسته شده است selectOnbtn-close
:
بعد از انتخاب باز بمانید
سلکت 2 در هنگام انتخاب یک عنصر ، به طور خودکار دکمه را از بین می برد ، مشابه آنچه
با یک کادر انتخاب عادی انجام می شود.شما ممکن است از
btn-closeOnSelectگزینه
ای برای جلوگیری از بسته شدن کشویی در هنگام انتخاب نتیجه:
قرار دادن کشویی
این dropdownParent
گزینه به شما امکان می دهد یک عنصر جایگزین را برای کشویی انتخاب کنید که به آن
اضافه شود:
محدود کردن تعداد انتخاب ها
سلکت 2 جعبه های انتخاب چند ارزش می توانند محدودیت هایی را در مورد حداکثر تعداد
گزینه هایی که می توانند انتخاب کنند تعیین کنند.انتخاب زیر با اعلام شده است
multiple
ویژگی با maximumSelectionLength
در گزینه های سلکت 2.
ایجاد گزینه پویا
علاوه بر منوی پیش بینی شده گزینه ها, سلکت 2 می تواند به صورت پویا گزینه های جدیدی
را از ورودی متن توسط کاربر در کادر جستجو ایجاد کند.این ویژگی "برچسب زدن" نامیده
می شود.برای فعال کردن برچسب زدن ، تنظیم کنید tags
گزینه به
true:
برچسب زدن با جعبه های چند ارزش
برچسب زدن همچنین می تواند در جعبه های انتخاب چند ارزش استفاده شود.در مثال زیر, ما
تنظیم کردیم multiple="multiple"
ویژگی در سلکت 2 کنترلی که دارد tags: true
فعال:
متغیرهای واحد را انتخاب کنید
سلکت 2 پشتیبانی از نمایش یک مقدار نگهدارنده مکان با استفاده از
placeholder
گزینه پیکربندی. مقدار نگهدارنده محل تا زمانی که انتخابی انجام شود نمایش داده می
شود.
دارایی های چند انتخابی
برای چند انتخاب ، شما باید نداشته باشید عنصر
<option>خالی:
متغیرهای انتخاب پیش فرض
از طرف دیگر ، مقدار placeholderگزینه
می تواند یک شی داده باشد که یک انتخاب پیش فرض را نشان می دهد (<option>).
در این حالتid
از شیء داده باید مطابقت داشته باشد
مقداراز
انتخاب پیش فرض مربوطه
سفارشی سازی نحوه مطابقت نتایج
هنگامی که کاربران با وارد کردن شرایط جستجو در کادر جستجو ، نتایج را فیلتر می
کنند, سلکت 2 از یک "کبریت" داخلی برای مطابقت با شرایط جستجو با نتایج استفاده می
کند. شما ممکن است روشی را که سلکت 2 با مشخص کردن شرایط جستجو مطابقت دارد
پاسخ به تماس برای matcher
گزینه پیکربندی.
تطبیق گزینه های گروهی
فقط اشیاء سطح اول به matcher
پاسخ به تماساگر با داده های تو در تو کار می کنید ، باید از طریق
children
آنها را به صورت جداگانه آرایه کنید.این امر امکان تطبیق پیشرفته تر هنگام کار با
اشیاء تو در تو را فراهم می کند ، به شما امکان می دهد هرچند که می خواهید ، آنها
را اداره کنید.
حداقل طول مدت جستجو
شما ممکن است حداقل طول مدت جستجو را با استفاده از
minimumInputLength
گزینه:
حداکثر طول مدت جستجوی
شما ممکن است حداکثر طول شرایط جستجو را با استفاده از
maximumInputLength
گزینه:
برنامه نویسی گزینه های جدید را اضافه کنید
گزینه های جدید را می توان به a اضافه کرد سلکت 2 با ایجاد یک جاوا اسکریپت جدید
برنامه نویسی را کنترل کنید Optionشیء
و ضمیمه آن به کنترل:
اگر وجود نداشته باشد ایجاد کنید
شما می توانید استفاده کنید .find
برای انتخاب گزینه در صورت وجود ، و ایجاد آن در غیر این صورت:
با استفاده از انتخاب کننده جی کوئری
موارد منتخب نیز از طریق قابل دسترسی است :selected
انتخابگر جی کوئری
پشتیبانی RTL
سلکت 2 اگر در وب سایت های راست چین کار خواهد کرد dir
ویژگی در
<select> یا هر پدر و مادر
آن.شما همچنین می توانید اولیه کنید سلکت 2 را با dir: "rtl" در تنظیمات.
بستن سلکت 2 کنترل
The destroyاین
متد برای حذف سلکت 2 ویجت از عنصر هدف.دوباره به یک استاندارد باز خواهد گشتselect
:
باز کردن کشویی
سلکت 2 هنگامی که اقدامات مختلف با استفاده از مؤلفه انجام می شود ، چند رویداد مختلف ایجاد می کند و به شما امکان می دهد قلاب های سفارشی را اضافه کرده و اقدامات خود را انجام دهید.
افتتاح/بسته شدن کشویی
سلکت 2 هنگامی که اقدامات مختلف با استفاده از مؤلفه انجام می شود ، چند رویداد مختلف ایجاد می کند, به شما امکان اضافه کردن قلاب های سفارشی و انجام اقدامات.
سلکت 2 متدها
سلکت 2 دارای چندین روش داخلی است که امکان کنترل برنامه ای را فراهم می کند جزء.
سلکت2 متد
سلکت 2 دارای چندین روش داخلی است که امکان کنترل برنامه ای را فراهم می کند جزء.