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 相关文章推荐
javascript 动态加载 css 方法总结
Jul 11 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
vue2的todolist入门小项目的详细解析
May 11 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
使用jquery实现轮播图效果
Jan 02 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 构造函数construct的前下划线是双的_
2009/12/08 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
js实现随机点名功能
2020/12/23 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
对python模块中多个类的用法详解
2019/01/10 Python
Python unittest框架操作实例解析
2020/04/13 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Python字符串三种格式化输出
2020/09/17 Python
flask框架中的cookie和session使用
2021/01/31 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
市三好学生主要事迹
2014/01/28 职场文书
会议欢迎词范文
2015/01/27 职场文书
创卫工作总结2015
2015/04/22 职场文书
敬老院活动感想
2015/08/07 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS