EasyUI实现下拉框多选功能


Posted in Javascript onNovember 07, 2017

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

效果图:

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实现下拉框多选

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 #Javascript
ES6中数组array新增方法实例总结
Nov 07 #Javascript
vue组件父子间通信详解(三)
Nov 07 #Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 #Javascript
微信小程序上传图片到服务器实例代码
Nov 07 #Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 #Javascript
vue组件间通信子与父详解(二)
Nov 07 #Javascript
You might like
zend api扩展的php对象的autoload工具
2011/04/18 PHP
定义php常量的详解
2013/06/09 PHP
初识php MVC
2014/09/10 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
原生JS实现天气预报
2020/06/16 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
python双向链表实现实例代码
2013/11/21 Python
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
高分子材料与工程专业个人求职信
2013/12/15 职场文书
工会换届选举方案
2014/05/21 职场文书
开学典礼演讲稿
2014/05/23 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫