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),好用
Apr 08 Javascript
EXT中xtype的含义分析
Jan 07 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
node.js遍历目录的方法示例
Aug 01 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
如何用threejs实现实时多边形折射
May 07 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之第四天
2006/10/09 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
js实现时钟定时器
2020/03/26 Javascript
js编写简易的计算器
2020/07/29 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
Python3基础之基本数据类型概述
2014/08/13 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
python写入xml文件的方法
2015/05/08 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
pandas通过loc生成新的列方法
2018/11/28 Python
常用的10个Python实用小技巧
2020/08/10 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
自我评价范文分享
2014/01/04 职场文书
新书吧创业计划书
2014/01/31 职场文书
化学教学随笔感言
2014/02/19 职场文书
大学三年计划书范文
2014/04/30 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书