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 相关文章推荐
JScript的条件编译
May 29 Javascript
js 小数取整的函数
May 10 Javascript
js null undefined 空区别说明
Jun 13 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
详解React 的几种条件渲染以及选择
Oct 23 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
Python验证码识别的方法
2015/07/10 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
详解Python yaml模块
2020/09/23 Python
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
自荐信怎么写好
2013/11/11 职场文书
开会迟到检讨书
2014/01/08 职场文书
药品营销策划方案
2014/06/15 职场文书
学校端午节活动总结
2015/02/11 职场文书
应聘教师自荐信
2015/03/26 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
浅谈JavaScript作用域
2021/12/06 Javascript