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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
老生常谈js数据类型
Aug 03 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
JS中数据结构之栈
Jan 01 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
原生js实现日期联动
2015/01/12 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python利用datetime模块计算时间差
2015/08/04 Python
利用python画一颗心的方法示例
2017/01/31 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
Python列表切片常用操作实例解析
2019/12/16 Python
Python字典底层实现原理详解
2019/12/18 Python
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
北大研究生linux应用求职信
2013/10/29 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
银行领导证婚词
2014/01/11 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
五四青年节演讲稿
2014/05/26 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
利用python进行数据加载
2021/06/20 Python