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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 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
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
javascript操作css属性
2013/12/30 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
Python编写单元测试代码实例
2020/09/10 Python
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
几个SQL的面试题
2014/03/08 面试题
家长会演讲稿范文
2014/01/10 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
婚育证明格式
2015/06/17 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏