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 相关文章推荐
JavaScript 事件记录使用说明
Oct 20 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
jquery操作angularjs对象
Jun 26 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
vue基于better-scroll仿京东分类列表
Jun 30 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
js微信分享实现代码
2020/10/11 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
js回调函数仿360开机
2019/12/26 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
Python函数式编程指南(四):生成器详解
2015/06/24 Python
Python实现八大排序算法
2016/08/13 Python
使用Python处理BAM的方法
2018/09/28 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
如何使用python传入不确定个数参数
2020/02/18 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
节水口号标语
2014/06/19 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
六年级小学生评语
2014/12/26 职场文书
教学反思怎么写
2016/02/24 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS