نمای کلی وبسایت رسمی
Choices.js یک پلاگین جعبه انتخاب/ورودی متنی سبک و قابل تنظیم است. مشابه Select2 و Selectize اما بدون وابستگی به jQuery.
مثال پایه #
ویژگی data-choices را برای تنظیم یک انتخاب پیشفرض تکی تنظیم کنید.
<select class="form-control" data-choices name="choices-single-default" id="choices-single-default">
<option value="">این یک مکاننگار است</option>
<option value="Choice 1">انتخاب 1</option>
<option value="Choice 2">انتخاب 2</option>
<option value="Choice 3">انتخاب 3</option>
</select>
مثال گروههای گزینه #
ویژگی data-choices data-choices-groups را برای تنظیم گروه گزینهها تنظیم کنید.
<label for="choices-single-groups" class="form-label text-muted">گروههای گزینه</label>
<select class="form-control" id="choices-single-groups" data-choices data-choices-groups data-placeholder="شهر را انتخاب کنید" name="choices-single-groups">
<option value="">یک شهر را انتخاب کنید</option>
<optgroup label="UK">
<option value="London">لندن</option>
<option value="Manchester">منچستر</option>
<option value="Liverpool">لیورپول</option>
</optgroup>
<optgroup label="FR">
<option value="Paris">پاریس</option>
<option value="Lyon">لیون</option>
<option value="Marseille">مارسی</option>
</optgroup>
<optgroup label="DE" disabled>
<option value="Hamburg">هامبورگ</option>
<option value="Munich">مونیخ</option>
<option value="Berlin">برلین</option>
</optgroup>
<optgroup label="US">
<option value="New York">نیویورک</option>
<option value="Washington" disabled>واشنگتن</option>
<option value="Michigan">میشیگان</option>
</optgroup>
<optgroup label="SP">
<option value="Madrid">مادرید</option>
<option value="Barcelona">بارسلونا</option>
<option value="Malaga">مالاگا</option>
</optgroup>
<optgroup label="CA">
<option value="Montreal">مونترال</option>
<option value="Toronto">تورنتو</option>
<option value="Vancouver">ونکوور</option>
</optgroup>
</select>
گزینههای اضافه شده از طریق پیکربندی بدون جستجو #
ویژگی data-choices data-choices-search-false data-choices-removeItem را تنظیم کنید.
<select class="form-control" id="choices-single-no-search" name="choices-single-no-search" data-choices data-choices-search-false data-choices-removeItem>
<option value="Zero">صفر</option>
<option value="One">یک</option>
<option value="Two">دو</option>
<option value="Three">سه</option>
<option value="Four">چهار</option>
<option value="Five">پنج</option>
<option value="Six">شش</option>
</select>
گزینههای اضافه شده از طریق پیکربندی بدون مرتبسازی #
ویژگی data-choices data-choices-sorting-false را تنظیم کنید.
<select class="form-control" id="choices-single-no-sorting" name="choices-single-no-sorting" data-choices data-choices-sorting-false>
<option value="Madrid">مادرید</option>
<option value="Toronto">تورنتو</option>
<option value="Vancouver">ونکوور</option>
<option value="London">لندن</option>
<option value="Manchester">منچستر</option>
<option value="Liverpool">لیورپول</option>
<option value="Paris">پاریس</option>
<option value="Malaga">مالاگا</option>
<option value="Washington" disabled>واشنگتن</option>
<option value="Lyon">لیون</option>
<option value="Marseille">مارسی</option>
<option value="Hamburg">هامبورگ</option>
<option value="Munich">مونیخ</option>
<option value="Barcelona">بارسلونا</option>
<option value="Berlin">برلین</option>
<option value="Montreal">مونترال</option>
<option value="New York">نیویورک</option>
<option value="Michigan">میشیگان</option>
</select>
ورودی انتخاب چندگانه #
ویژگی data-choices multiple را تنظیم کنید.
<select class="form-control" id="choices-multiple-default" data-choices name="choices-multiple-default" multiple>
<option value="Choice 1" selected>انتخاب 1</option>
<option value="Choice 2">انتخاب 2</option>
<option value="Choice 3">انتخاب 3</option>
<option value="Choice 4" disabled>انتخاب 4</option>
</select>
انتخاب چندگانه با دکمه حذف #
ویژگی data-choices data-choices-removeItem multiple را تنظیم کنید.
<select class="form-control" id="choices-multiple-remove-button" data-choices data-choices-removeItem name="choices-multiple-remove-button" multiple>
<option value="Choice 1" selected>انتخاب 1</option>
<option value="Choice 2">انتخاب 2</option>
<option value="Choice 3">انتخاب 3</option>
<option value="Choice 4">انتخاب 4</option>
</select>
انتخاب چندگانه با گروههای گزینه #
ویژگی data-choices data-choices-multiple-groups="true" multiple را تنظیم کنید.
<label for="choices-multiple-groups" class="form-label text-muted">گروههای گزینه</label>
<select class="form-control" id="choices-multiple-groups" name="choices-multiple-groups" data-choices data-choices-multiple-groups="true" multiple>
<option value="">یک شهر را انتخاب کنید</option>
<optgroup label="UK">
<option value="London">لندن</option>
<option value="Manchester">منچستر</option>
<option value="Liverpool">لیورپول</option>
</optgroup>
<optgroup label="FR">
<option value="Paris">پاریس</option>
<option value="Lyon">لیون</option>
<option value="Marseille">مارسی</option>
</optgroup>
<optgroup label="DE" disabled>
<option value="Hamburg">هامبورگ</option>
<option value="Munich">مونیخ</option>
<option value="Berlin">برلین</option>
</optgroup>
<optgroup label="US">
<option value="New York">نیویورک</option>
<option value="Washington" disabled>واشنگتن</option>
<option value="Michigan">میشیگان</option>
</optgroup>
<optgroup label="SP">
<option value="Madrid">مادرید</option>
<option value="Barcelona">بارسلونا</option>
<option value="Malaga">مالاگا</option>
</optgroup>
<optgroup label="CA">
<option value="Montreal">مونترال</option>
<option value="Toronto">تورنتو</option>
<option value="Vancouver">ونکوور</option>
</optgroup>
</select>
ورودی متنی #
ویژگی data-choices data-choices-limit="محدودیت مورد نیاز" data-choices-removeItem را تنظیم کنید.
<label for="choices-text-remove-button" class="form-label text-muted">تنظیم مقادیر محدود با دکمه حذف</label>
<input class="form-control" id="choices-text-remove-button" data-choices data-choices-limit="3" data-choices-removeItem type="text" value="وظیفه-1" />
ورودی متنی با مقادیر منحصر به فرد، بدون چسباندن #
ویژگی data-choices data-choices-text-unique-true را تنظیم کنید.
<label for="choices-text-unique-values" class="form-label text-muted">فقط مقادیر منحصر به فرد، بدون چسباندن</label>
<input class="form-control" id="choices-text-unique-values" data-choices data-choices-text-unique-true type="text" value="پروژه-A, پروژه-B" />
ورودیهای متنی غیرفعال #
ویژگی data-choices data-choices-text-disabled-true را تنظیم کنید.
<label for="choices-text-disabled" class="form-label text-muted">غیرفعال</label>
<input class="form-control" id="choices-text-disabled" data-choices data-choices-text-disabled-true type="text" value="josh@joshuajohnson.co.uk, joe@bloggs.co.uk" />