建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS输入框多选插件choices.js

来源:易助科技网浏览量:11收藏

简介

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

插件特定:

轻量级

没有jQuery依赖

可配置的排序

灵活的造型

快速搜索/过滤

清洁API

从右到左的支持

自定义模板


JS输入框多选插件choices.js-示例图1


JS输入框多选插件choices.js-示例图2


使用

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/