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 相关文章推荐
js判断undefined变量类型使用typeof
Jun 03 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 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
php学习笔记之面向对象编程
2012/12/29 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
python集合类型用法分析
2015/04/08 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
英文自荐信
2013/12/19 职场文书
甜品店创业计划书
2014/08/14 职场文书
公司人事任命通知
2015/04/20 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
大学班干部竞选稿
2015/11/20 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
javascript对象3个属性特征
2021/11/17 Javascript