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 相关文章推荐
jQuery插件开发基础简单介绍
Jan 07 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 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 Cookie处理函数
2016/08/09 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
JavaScipt基本教程之前言
2008/01/16 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
JS高级运动实例分析
2016/12/20 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python多线程下载文件的方法
2015/07/10 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
基于python指定包的安装路径方法
2018/10/27 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
《果园机器人》教学反思
2014/04/13 职场文书
《画》教学反思
2014/04/14 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
行政专员求职信范文
2014/05/03 职场文书
中学生运动会口号
2014/06/07 职场文书
经营理念口号
2014/06/21 职场文书