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 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 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应用JSON技巧讲解
2013/02/03 PHP
php实现的通用图片处理类
2015/03/24 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
Python的高级Git库 Gittle
2014/09/22 Python
Python实现的双色球生成功能示例
2017/12/18 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
python抖音表白程序源代码
2019/04/07 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
python爬取youtube视频的示例代码
2021/03/03 Python
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
运动会演讲稿50字
2014/08/25 职场文书
学习十八大宣传标语
2014/10/09 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
护士自我推荐信范文
2015/03/24 职场文书
民事答辩状范本
2015/05/21 职场文书
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript