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基础整理1
Dec 06 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
Javascript 命名空间模式
Nov 01 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
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
域名和cookie问题(域名后缀)
2012/10/10 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
django-初始配置(纯手写)详解
2019/07/30 Python
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
建材业务员岗位职责
2013/12/08 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
调查研究项目计划书
2014/04/29 职场文书
企业文化演讲稿
2014/05/20 职场文书
大专生找工作自荐书
2014/06/10 职场文书
党支部特色活动方案
2014/08/20 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
工作失误检讨书
2015/01/26 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers