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转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
js一组验证函数
2008/12/20 Javascript
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
python批量获取html内body内容的实例
2019/01/02 Python
金融行业职业生涯规划范文
2014/01/17 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
模范教师事迹材料
2014/12/16 职场文书
匿名检举信范文
2015/03/02 职场文书
数学备课组工作总结
2015/08/12 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
Android Studio 计算器开发
2022/05/20 Java/Android
使用Redis实现分布式锁的方法
2022/06/16 Redis