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 01 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
vue弹窗组件使用方法
Apr 28 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
js 表格隔行颜色
2009/12/02 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python实现bitmap数据结构详解
2014/02/17 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Python如何读写二进制数组数据
2020/08/01 Python
python获取linux系统信息的三种方法
2020/10/14 Python
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
房屋租赁意向书
2014/04/01 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
公司回复函格式
2015/07/14 职场文书
护理培训心得体会
2016/01/22 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle