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 相关文章推荐
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
vue的三种图片引入方式代码实例
Nov 19 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
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大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
js实现旋转的星空效果
2019/11/01 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
js里面的变量范围分享
2020/07/18 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
Python代码的打包与发布详解
2014/07/30 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
Python中无限循环需要什么条件
2020/05/27 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
会计主管岗位职责范文
2013/11/08 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
安全生产责任书
2014/03/12 职场文书
北京申奥口号
2014/06/19 职场文书
埃及王子观后感
2015/06/16 职场文书