اولیه

استفاده از select2() بر روی عنصر انتخاب شده تکیه کنید تا آن را به انتخاب 2 تبدیل کنید.

<select class="form-control  basic">
    <option selected="selected">orange</option>
    <option>white</option>
    <option>purple</option>
</select>
var ss = $(".basic").select2({
    tags: true,
});

انتخاب 2 کوچک

استفاده از data('select2') تابع برای بدست آوردن ظرف انتخاب 2.

<select class="form-control form-small">
    <option selected="selected">orange</option>
    <option>white</option>
    <option>purple</option>
</select>
var formSmall = $(".form-small").select2({ tags: true });
formSmall.data('select2').$container.addClass('form-control-sm')

توکار

گزینه های موجود در داخل را اضافه کنیدoptgroupsبرای گزینه های گروه.

<select class="form-control nested">
    <optgroup label="Group1">
        <option selected="selected">orange</option>
        <option>white</option>
        <option>purple</option>
    </optgroup>
    <optgroup label="Group2">
        <option>purple</option>
        <option>orange</option>
        <option>white</option>
    </optgroup>
    <optgroup label="Group3">
        <option>white</option>
        <option>purple</option>
        <option>orange</option>
    </optgroup>
</select>
$(".nested").select2({
    tags: true
});

غیرفعال کردن گزینه ها

استفاده را غیرفعال کنیدdisabled صفت.

<select class="form-control disabled-results">
    <option value="one">First</option>
    <option value="two" disabled="disabled">Second</option>
    <option value="three">Third</option>
</select>
$(".disabled-results").select2();

مکان نگهدار

گزینه تنظیم را اعمال کنید placeholder گزینه.

<select class="placeholder js-states form-control">
    <option>انتخاب کنید...</option>
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
    <option value="four">Fourth</option>
    <option value="five">Fifth</option>
</select>
$(".placeholder").select2({
    placeholder: "Make a Selection",
    allowClear: true
});

برچسب زدن با جعبه های انتخاب چند ارزش

تنظیم tags: true برای تبدیل 2 انتخاب در حالت Tag.

<select class="form-control tagging" multiple="multiple">
    <option>orange</option>
    <option>white</option>
    <option>purple</option>
</select>
$(".tagging").select2({
    tags: true
});

محدود کردن تعداد برچسب زدن

تنظیم maximumSelectionLength: 2 با tags: true برای محدود کردن انتخاب در حالت Tag.

<select class="form-control tagging" multiple="multiple">
    <option>orange</option>
    <option>white</option>
    <option>purple</option>
</select>
var ss = $(".basic").select2({
    tags: true,
});