100字范文 > multiple-select 多选下拉框

multiple-select 多选下拉框

时间：2024-07-14 14:40:58

1. 下载源码和文档

git-hub 源码：/wenzhixin/multiple-select

参考文档：https://multiple-.cn/docs/en/options.html

2. 解压找到 dist 文件夹

3. 个人示例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../css/multiple-select.css"></head><body><div><select name='column' multiple="multiple"></select></div></body><script src="../3dLib/jquery-3.4.1.js"></script><script src="../3dLib/multiple-select.js"></script><script src="../3dLib/multiple-select-locale-all.js"></script><script>var opts = {};var cMultipleSelect = $("select[name='column']").multipleSelect({locale: "zh-CN",width: 200,data: [{ //设置选项text: "耕地",value: "gd"}, {text: "林地",value: "gd"}, {text: "断层",value: "gd"}, {text: "硝酸盐地层",value: "gd"}, {text: "地下水层",value: "gd"}, {type: 'optgroup',label: 'Group 1',children: [{text: 'Option 1',value: 1}, {text: 'Option 2',value: 2}, {text: 'Option 3',value: 3}]}],placeholder: "请选择",/******************事件监听*********************/onCheckAll: multiSelCheckAll, //全选onUncheckAll: multiSelCheckAll, //取消全选onClick: multiSelClick, //点击/******************事件监听结束*********************/});function multiSelCheckAll() {debugger;var opts = getOptions();console.log(this.data);}function multiSelClick(data) {/***************方法调用****************/var opts = cMultipleSelect.multipleSelect("getSelects", "text"); //获取方法// var opts = cMultipleSelect.multipleSelect("getOptions");/***************方法调用结束****************/console.log(data);}function getOptions(data) {debugger}</script></html>

4.查看示例

切换示例和源码https://multiple-.cn/examples#single-row.html#view-source

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。