当前位置:主页 > JavsScript库 > 表单 >

JavaScript中可过滤和可检查的多选下拉菜单
栏目分类:表单   发布日期:2021-09-14   浏览次数:

一个轻量级的、与框架无关的 JavaScript 库,用于创建增强的多选下拉菜单。

它将本机选择框转换为可过滤和可检查的下拉列表,并将所选选项显示为页面上的标签/标记。

使用:

1. 加载multiselect-dropdown.js文档中的主脚本。

<script src="multiselect-dropdown.js" ></script>

2. 为多选元素分配一个唯一的 ID,剩下的由库来完成。

<select name="cars" id="cars" multiple>
  <option value="1">Audi</option>
  <option selected value="2">BMW</option>
  <option selected value="3">Mercedes</option>
  <option value="4">Volvo</option>
  <option value="5">Lexus</option>
  <option value="6">Tesla</option>
</select>

3. 启用实时搜索功能。

<select name="cars" id="cars" multiple multiselect-search="true">
  <option value="1">Audi</option>
  <option selected value="2">BMW</option>
  <option selected value="3">Mercedes</option>
  <option value="4">Volvo</option>
  <option value="5">Lexus</option>
  <option value="6">Tesla</option>
</select>

4. 显示一个全选复选框,使用户可以选择所有选项。

<select name="cars" id="cars" multiple multiselect-select-all="true">
  <option value="1">Audi</option>
  <option selected value="2">BMW</option>
  <option selected value="3">Mercedes</option>
  <option value="4">Volvo</option>
  <option value="5">Lexus</option>
  <option value="6">Tesla</option>
</select>

5. 确定要显示的结果数。

<select name="cars" id="cars" multiple multiselect-max-items="3">
  <option value="1">Audi</option>
  <option selected value="2">BMW</option>
  <option selected value="3">Mercedes</option>
  <option value="4">Volvo</option>
  <option value="5">Lexus</option>
  <option value="6">Tesla</option>
</select>

官方网站:https://github.com/admirhodzic/multiselect-dropdown

相关热词: 多选标签输入

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库