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获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
谈谈JavaScript中的函数
Sep 08 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中数据的批量导入(csv文件)
2006/10/09 PHP
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
php实现多城市切换特效
2015/08/09 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
浅谈Python数据类型之间的转换
2016/06/08 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
企业法人任命书
2015/09/21 职场文书
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电