EasyUI实现下拉框多选功能

2019-11-19 14:58:28

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了EasyUI实现下拉框多选展示的具体代码，供大家参考，具体内容如下

效果图：

这个没什么说的，直接引入css和js文件和图片，调用js即可。下面是源码：

<html>  <head>   <meta charset="utf-8" />   <title>利用EasyUI实现多选下拉框</title>   <link rel="stylesheet" type="text/css" href="css/easyui.css" rel="external nofollow" />   <style type="text/css">    ul{     width: 200px !important;    }    li{     width: 50px !important;     float: left !important;    }   </style>   <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>   <script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>   <script type="text/javascript">    $(function () {     $('#ddlLine').combotree({      valueField: "id", //Value字段      textField: "text", //Text字段      multiple: true,      data: [{ "id": 1, "text": "All", "children": [{ "id": 13, "text": "C1" }, { "id": 14, "text": "C2" }, { "id": 15, "text": "C3"}]}], //     url: "tree_data2.json", //数据源      onCheck: function (node, checked) {       //让全选不显示       $("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", ""));      },      onClick: function (node, checked) {       //让全选不显示       $("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", ""));      }     });    })   </script> </head> <body>  多选：<select id="ddlLine" class="easyui-combotree" style="width: 205px; height: 24px;">  </select> </body> </html>

下载地址：EasyUI实现下拉框多选

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Vue组件开发之LeanCloud带图形校验码的短信发送功能

下一篇：ES6中字符串string常用的新增方法小结