JS输入框多选插件choices.js

简介

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/