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 相关文章推荐
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
JS实现页面打印功能
Mar 16 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 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
在线增减.htpasswd内的用户
2006/10/09 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
Python批量查询域名是否被注册过
2017/06/21 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
python基于ID3思想的决策树
2018/01/03 Python
利用python如何处理nc数据详解
2018/05/23 Python
如何在Django项目中引入静态文件
2019/07/26 Python
简单了解python中的与或非运算
2019/09/18 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
软件设计的目标是什么
2016/12/04 面试题
优秀学生事迹材料
2014/02/08 职场文书
团组织关系介绍信
2019/06/24 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers