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效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
取选中的radio的值
Jan 11 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
js实现无缝轮播图
Mar 09 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
使用Ajax实现进度条的绘制
Apr 07 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 UBB 解析实现代码
2011/11/27 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
百度留言本js 大家可以参考下
2009/10/13 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
vue生命周期的探索
2019/04/03 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python实现淘宝购物系统
2019/10/25 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
python实现最速下降法
2020/03/24 Python
普通PHP程序员笔试题
2016/01/01 面试题
求职信的要素有哪些呢
2013/12/26 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
二审答辩状范文
2015/05/22 职场文书
关于童年的读书笔记
2015/06/26 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
浅谈Python数学建模之线性规划
2021/06/23 Python
Redis分布式锁Redlock的实现
2021/08/07 Redis