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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 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
html中select语句读取mysql表中内容
2006/10/09 PHP
PHP 表单提交给自己
2008/07/24 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
简单的js表格操作
2016/09/24 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
最新党员思想汇报
2014/01/01 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
2014年店长工作总结
2014/11/17 职场文书
学习委员竞选稿
2015/11/20 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
详解JS数组方法
2021/11/20 Javascript
DSP接收机前端设想
2022/04/05 无线电