Select标签下拉列表二级联动级联实例代码


Posted in Javascript onFebruary 07, 2014

首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID。

var options=new Array();
    $(document).ready(function(){
        //二级联动
        $('#ddlPages').children('option').each(function(i){
            options[i]='<option value="'+$(this).val()+'">'+$(this).text()+'</option>';
        });//将option列表放到数组里
        $('#ddlPages option:gt(0)').remove();    //清楚下拉
        $('#ddlSubsystems').bind('change',function(){        //注册事件
            var systemname=$('#ddlSubsystems option:selected').text();
            for(var j=0;j<options.length;j++){
                $('#ddlPages').append(options[j]);
            }    //option列表先初始化
            $('#ddlPages option:gt(0)').each(function(i){    //遍历排除
                var textname=$(this).text();
                var index=textname.indexOf('-'+systemname);
                if(index<0){
                    $(this).remove();
                }else{
                    $(this).text(textname.substring(0,index));
                }
            });
            $('#ddlPages').val(0);                            //默认选中第一行
        });
    });
Javascript 相关文章推荐
js DOM模型操作
Dec 28 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
javascript运行机制之this详细介绍
Feb 07 #Javascript
jQuery获取当前对象标签名称的方法
Feb 07 #Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 #Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 #Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 #Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 #Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 #Javascript
You might like
PHP 基本语法格式
2009/12/15 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
学习vue.js计算属性
2016/12/03 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
python实现门限回归方式
2020/02/29 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
Android笔试题总结
2014/11/29 面试题
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
Weblogic和WebSphere不同特点
2012/05/09 面试题
Java面试题汇总
2015/12/06 面试题
商业街策划方案
2014/05/31 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
Java对文件的读写操作方法
2022/04/29 Java/Android