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 相关文章推荐
jQuery找出网页上最高元素的方法
Mar 20 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
js实现tab切换效果实例
Sep 16 Javascript
老生常谈的跨域处理
Jan 11 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
Vue中的字符串模板的使用
May 17 Javascript
vue ssr 指南详读
Jun 29 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
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文本数据库的搜索方法
2006/10/09 PHP
PHP文件下载类
2006/12/06 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
简单的php购物车代码
2020/06/05 PHP
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
解决pip install psycopg2出错问题
2020/07/09 Python
怎样声明接口
2014/09/19 面试题
性能测试工程师的面试题
2015/02/20 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
历史系毕业生自荐信
2013/10/28 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
项目转让协议书
2014/10/27 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
2016春节放假通知范文
2015/08/18 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
javascript的var与let,const之间的区别详解
2022/02/18 Javascript