简介

choices.js是一款JS可定制的选择框或文本输入插件。

插件特定：

轻量级
没有jQuery依赖
可配置的排序
灵活的造型
快速搜索/过滤
清洁API
从右到左的支持
自定义模板

使用

1.  引入文件

<!-- Include base CSS (optional) -->
<link rel="stylesheet" href="public/assets/styles/base.min.css" />
<!-- Include Choices CSS -->
<link rel="stylesheet" href="public/assets/styles/choices.min.css" />
<!-- Include Choices JavaScript -->
<script src="/public/assets/scripts/choices.min.js"></script>

2.  HTML

<label for="docno" class="col-form-label">Name :</label>
<select id='docno' class="choices form-select" ng-model="docno" ng-change='getDocs()' required="true">
     <option ng-repeat="d in documents" ng-value="d.docno" selected='selected'>{{d.name}}</option>
</select>

3.  调用

var choices = new Choices(document.getGetElementById("docno"));
var myDynamicItems = [
    {
        value: 'Value 1',
        label: 'Label 1',
        id: 1
    },
    {
        value: 'Value 2',
        label: 'Label 2',
        id: 2
    }
];

inst.choices.setValue(myDynamicItems);

相关链接

GitHub 地址 ：https://github.com/Choices-js/Choices

bootCDN 下载地址 ：https://www.bootcdn.cn/choices.js/