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中定义对象类别
Dec 22 Javascript
DHTML Slide Show script图片轮换
Mar 03 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
如何在JavaScript中正确处理变量
Dec 25 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php cc攻击代码与防范方法
2012/10/18 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
PHP中文编码小技巧
2014/12/25 PHP
php的socket编程详解
2016/11/20 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
python字符串排序方法
2014/08/29 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
2016春季运动会开幕词
2016/03/04 职场文书
团组织关系介绍信
2019/06/24 职场文书