jquery实现下拉框多选方法介绍


Posted in Javascript onJanuary 03, 2017

一、说明

本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下

二、代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>利用EasyUI实现多选下拉框</title>
 <link rel="stylesheet" type="text/css" href="EasyUI/easyui.css" />
 <script type="text/javascript" src="EasyUI/jquery.min.js"></script>
 <script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></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>

三、效果

jquery实现下拉框多选方法介绍

jquery实现下拉框多选方法介绍

jquery实现下拉框多选方法介绍

四、下载

案例下载:http://wd.3water.com:81//201701/yuanma/ComboBox_3water.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 #Javascript
详解JavaScript常量定义
Jan 03 #Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 #Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 #Javascript
一个例子轻松学会Vue.js
Jan 02 #Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 #Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 #Javascript
You might like
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
pytorch permute维度转换方法
2018/12/14 Python
Python 编程速成(推荐)
2019/04/15 Python
Python print不能立即打印的解决方式
2020/02/19 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
大型活动策划方案
2014/01/12 职场文书
迎新晚会主持词
2014/03/24 职场文书
市场营销专业自荐书
2014/06/10 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
走群众路线学习笔记
2014/11/06 职场文书
施工现场安全管理制度
2015/08/05 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
Echarts如何重新渲染实例详解
2022/05/30 Javascript