jquery实现下拉框多选方法介绍
一、说明
本文是利用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>
三、效果
四、下载
案例下载:http://wd.jb51.net:81//201701/yuanma/ComboBox_jb51.rar
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
相关推荐
-
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴
-
jquery multiSelect 多选下拉框
$("#id").multiSelect({ oneOrMoreSelected: '*',selectAll:false,noneSelected:'默认显示' }); Usage: $('#id').multiSelect( options, callback ) Options: selectAll - whether or not to display the Select All option; true/false, default = true selectAllText
-
利用Jquery实现可多选的下拉框
首先下载jquery.multiselect.js 的插件然后复制下列代码,只需改下路径就可以实现可多选下拉框.如果好用还请多多支持! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://w
-
jQuery对下拉框,单选框,多选框的操作
下拉框: //得到下拉菜单的选中项的文本(注意中间有空格)var cc1 = $(".formc select[@name='country'] option[@selected]").text();//得到下拉菜单的选中项的值var cc2 = $('.formc select[@name="country"]').val();//得到下拉菜单的选中项的ID属性值var cc3 = $('.formc select[@name="country"
-
jQuery实现下拉框多选 jquery-multiselect 的实例代码
先给大家展示下效果图: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="../assets/style.css" /&g
-
jquery.multiselect多选下拉框实现代码
本文实例为大家分享了jquery.multiselect多选下拉框的实现方法,供大家参考,具体内容如下 第一步:链接下列文件,如果没有,到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的基本文件都需要引用 <link rel="stylesheet" type="text/css" href="~/Scripts/jquerymult
-
一个简单的jquery的多选下拉框(自写)
今天做的项目要用到多选的下拉框,开始想在网上找一个插件用用,可是,网上的插件看起来都比较杂乱,我参考了网上的一些插件,自己用jquery写了一个多选下拉框,js写得比较简洁.代码如下. js代码 复制代码 代码如下: (function(){ $.fn.extend({ checks_select: function(options){ jq_checks_select = null; $(this).click(function(e){ jq_check = $(this); //jq_che
-
jquery实现下拉框多选方法介绍
一.说明 本文是利用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.w
-
jQuery设置下拉框显示与隐藏效果的方法分析
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() 方法则可以切换 hide() 和 show() 方法,也就是显示被隐藏的元素,并隐藏已显示的元素. $("select").hide(); // 隐藏下拉框 $("select").show(); // 显示下拉框 $("select").togg
-
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
本文实例讲述了jQuery+jsp下拉框联动获取本地数据的方法.分享给大家供大家参考,具体如下: JQuery下拉框联动很好的体现了Ajax的按需取数据的要求,减小数据的交互量.(点击此处下载源代码) 下面的实例使用Json将服务器端的类或者对象转换为JSON格式,主要运用了6个jar包 commons-beanutils-1.7.0.jar commons-collections-3.2.jar commons-lang-2.3.jar commons-logging-1.0.4.jar ez
-
Yii2实现上下联动下拉框功能的方法
本文实例讲述了Yii2实现上下联动下拉框功能的方法.分享给大家供大家参考,具体如下: 首先我先解释下什么是上下联动的下拉框 假如一个view里面有两个select,第一个是公司名,第二个是分公司名.公司有多个,每个公司又有多个分公司,我们实现的就是点击当前公司后,分公司里面显示的事当前公司的分公司. 或者你直接理解成选择所属省份后,下面的select显示的是当前省份的县. 原理: 点击第一个select后,执行ajax获取当前公司的分公司,并使用jQuery修改分公司内容 两个select的部分
-
jQuery Select下拉框操作小结(推荐)
jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_
-
EasyUI实现下拉框多选功能
本文实例为大家分享了EasyUI实现下拉框多选展示的具体代码,供大家参考,具体内容如下 效果图: 这个没什么说的,直接引入css和js文件和图片,调用js即可.下面是源码: <html> <head> <meta charset="utf-8" /> <title>利用EasyUI实现多选下拉框</title> <link rel="stylesheet" type="text/css&qu
-
select获取下拉框的值 下拉框默认选中方法
本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值 例如: <select class="form-control" id="numbers"> <option value="1">数字1</option> <option value="2" selected>数字2</option> </select> $("
-
基于jQuery实现下拉框
项目中经常会遇到下拉框,在扁平化和响应式布局大行其道的今天,使用jQuery来实现下拉框就十分的必要了,而且也会美观很多,这里就给大家推荐一段基于jQuery的下拉框代码. jQuery代码: 复制代码 代码如下: $(function(){ $('#add').click(function(){ var $options = $('#select1 option:selected'); $options.a
-
Python抓取淘宝下拉框关键词的方法
本文实例讲述了Python抓取淘宝下拉框关键词的方法.分享给大家供大家参考.具体如下: import urllib2,re for key in open('key.txt'): do = "http://suggest.taobao.com/sug?code=utf-8&q=%s" % key.rstrip() _re = re.findall('\[\"(.*?)\",\".*?\"\]',urllib2.urlopen(do).re
随机推荐
- 学习ExtJS TextField常用方法
- Java输出链表倒数第k个节点
- Golang中如何使用lua进行扩展详解
- JS 无限级 Select效果实现代码(json格式)
- 利用iptables来配置linux禁止所有端口登陆和开放指定端口的方法
- java多线程编程学习(线程间通信)
- Asp.net中获取DataTable选择第一行某一列值
- php 无限级数据JSON格式及JS解析
- 跟老齐学Python之眼花缭乱的运算符
- DBA 在Linux下安装Oracle Database11g数据库图文教程
- Redis 中spark参数executor-cores引起的异常解决办法
- IE中的File域无法清空使用jQuery重设File域
- 关于Jquery中的bind(),on()绑定事件方式总结
- javascript中xml操作实现代码
- nodejs进阶(6)—连接MySQL数据库示例
- 玩转Windows系统组策略高级技巧
- vsftpd的530 Login incorrect错误解决方法 vsftpd登录错误
- MySQL用户管理
- Android百度地图应用之基本地图功能实现
- 模拟windows平台的上下文菜单效果代码