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对象
Sep 13 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
js仿京东放大镜效果
Aug 09 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与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
教大家制作简单的php日历
2015/11/17 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
AngularJS实现表单验证功能详解
2017/10/12 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
在Python程序中操作MySQL的基本方法
2015/07/29 Python
浅谈Python中函数的参数传递
2016/06/21 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
python str字符串转uuid实例
2020/03/03 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
体育教育个人自荐信范文
2013/12/01 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
探矿工程师自荐信
2014/01/24 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
毕业证委托书范文
2014/09/26 职场文书
个人合伙协议书范本
2014/10/14 职场文书
维稳工作情况汇报
2014/10/27 职场文书
九华山导游词
2015/02/03 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
初中班长竞选稿
2015/11/20 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书