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 相关文章推荐
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
vue实现搜索过滤效果
May 28 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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
资料注册后发信小技巧
2006/10/09 PHP
NO3第三帝国留言簿制作过程
2006/10/09 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
js代码实现微博导航栏
2015/07/30 PHP
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
玩转python爬虫之cookie使用方法
2016/02/17 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
简单了解如何封装自己的Python包
2020/07/08 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
PHP面试题-$message和$$message的区别
2015/12/08 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
网上开商店的创业计划书
2014/01/19 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
小学教师寄语大全
2014/04/03 职场文书
气象学专业个人求职信
2014/04/22 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers