Select

#Select

自定义选择控件。

<select class="form-control custom-select">
    <option selected="selected" value="2">Approved</option>
    <option value="3">Deleted</option>
    <option value="1">New</option>
</select>

#Sizes

#小尺寸

<div class="form-group form-group-sm">
    <select class="form-control custom-select">
        <option value="1" selected="selected">One</option>
        <option value="2">Two</option>
    </select>
</div>

#大尺寸

<div class="form-group form-group-lg">
    <select class="form-control custom-select">
        <option value="1" selected="selected">One</option>
        <option value="2">Two</option>
    </select>
</div>

#Options

#禁用搜索

添加select-no-search 禁用搜索的 CSS 类。

<div class="form-group">
    <select class="form-control custom-select select-no-search">
        <option value="1" selected="selected">One</option>
        <option value="2" selected="selected">Two</option>
    </select>
</div>

#动态选项创建

除了预先填充的选项菜单外，选择小部件还可以根据用户在搜索框中输入的文本动态创建新选项。此功能称为“标记”。要启用标记，请设置tags 选择权true:

<select
    class="form-control custom-select"
    data-tags="true"
></select>

#选项组

使用optgroup 元素来创建选项组。

<select class="form-control custom-select">
    <option value="1">Please select an option</option>
    <option value="2">Ungrouped option</option>
    <optgroup label="Option Group">
        <option value="3">Grouped option</option>
        <option value="4">Another option</option>
        <option value="4">Third option</option>
    </optgroup>
</select>

#AJAX 搜索

使用data-handler 属性从 AJAX 处理程序获取选择选项。

<select
    class="form-control custom-select"
    data-handler="onGetOptions"
    data-minimum-input-length="2"
    data-ajax-delay="300"
    data-request-data="foo: 'bar'"
></select>

AJAX 处理程序应在Select2 数据格式.

public function onGetOptions()
{
    return [
        'results' => [
            [
                'id' => 1,
                'text' => 'Foo'
            ],
            [
                'id' => 2,
                'text' => 'Bar'
            ]
            ...
        ]
    ];
}

或者一个更全面的例子：

public function onGetOptions()
{
    return [
        'results' => [
            [
                'id' => 1,
                'text' => 'Foo',
                'disabled' => true
            ],
            [
                'id' => 2,
                'text' => 'Bar',
                'selected' => true
            ],
            [
                'text' => 'Group',
                'children' => [
                    [
                        'id' => 3,
                        'text' => 'Child 1'
                    ],
                    [
                        'id' => 4,
                        'text' => 'Child 2'
                    ]
                    ...
                ]
            ]
            ...
        ],
        'pagination' => [
            'more' => true
        ]
    ];
}

结果数组可以分配给result 或者results 钥匙。作为 Select2 格式的替代方案，结果也可以作为关联数组提供（也分配给任一键）。由于 JavaScript 不保证对象属性的顺序，我们建议使用上面的方法来定义结果。

public function onGetOptions()
{
    $results = [
        'key' => 'value',
        ...
    ];

    return ['result' => $results];
}