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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
js获取图片的base64编码并压缩
Dec 05 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
php include和require的区别深入解析
2013/06/17 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
js取得url地址参数实例
2013/02/22 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python随机函数random()使用方法小结
2018/04/29 Python
Django添加feeds功能的示例
2018/08/07 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
NumPy排序的实现
2020/01/21 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
python字符串判断密码强弱
2020/03/18 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
源码安装apache脚本部署过程详解
2022/09/23 Servers