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 相关文章推荐
AngularJS语法详解
Jan 23 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
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
FCKeditor的安装(PHP)
2007/01/13 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python WindowsError的错误代码详解
2017/07/23 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python 通配符删除文件的实例
2018/04/24 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Python3常见函数range()用法详解
2019/12/30 Python
Python json转字典字符方法实例解析
2020/04/13 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
出生公证书样本
2014/04/04 职场文书
员工安全生产承诺书
2014/05/22 职场文书
公司承诺书怎么写
2014/05/24 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
高一英语教学反思
2016/03/03 职场文书
导游词之桂林山水
2019/09/20 职场文书