首先从服务器端,绑定下拉列表,二级下拉的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);                            //默认选中第一行
        });
    });

Select标签下拉列表二级联动级联的更多相关文章

  1. 如何用jstl的select标签做二级联动下拉列表框??

    下拉列表框的多级联动早就会了.但是用jstl的select标签做下拉列表框的做二级联动的时候还是遇到了些问题.主要问题在用Ajax查询到的数据如何拼成下拉选项的时候.其实很简单,但我还是折腾了好久.所 ...

  2. select标签实现二级联动

    效果如下图所示: 实现的原理:使用onchange事件,原理见代码 html代码: <select id="select" class="sel"> ...

  3. jQuery下拉列表二级联动插件

    jQuery下拉列表二级联动插件的视图代码: <!doctype html> <html lang="en"> <head> <meta ...

  4. Mybatis + js 实现下拉列表二级联动

    Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...

  5. <select>简易的二级联动

    1.首先是表单页面: <tr> <td align="right"> <label class="Validform_label" ...

  6. select菜单实现二级联动

    <tr> <th>执行人<b>*</b></th> <td> <select name="jdcld.ZXDW& ...

  7. select下拉二级联动

    function opt(){ var id = $("#ids").val(); $.ajax({   type: "POST",  url: "$ ...

  8. jQuery 1.3.2 简单实现select二级联动

    jQuery 1.3.2 简单实现select二级联动  复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  9. 通同select便签实现简单的二级联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 给大家分享一个jQuery TAB插件演示

    jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...

  2. C#基础系列——多线程的常见用法详解

    前言:前面几节分别介绍了下C#基础技术中的反射.特性.泛型.序列化.扩展方法.Linq to Xml等,这篇跟着来介绍下C#的另一基础技术的使用.最近项目有点紧张,所以准备也不是特别充分.此篇就主要从 ...

  3. Go学习

    简介 Go语言是Google出了一个语言,基本概念我就不介绍了, GO语言从原生上支持高并发,并提供了简单的调用方式,我们就重点研究一下它的高并发 进程与线程 在介绍高并发之前,我们需要了解一下我们现 ...

  4. bzoj3343

    3343: 教主的魔法 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1178  Solved: 527[Submit][Status][Discus ...

  5. 设置 github 帐号user.name和邮箱user.email

    git config --global user.name username git config --global user.email username@email.com

  6. gulp复制整个文件夹或文件到指定目录(包括拷贝单个文件)

    整个目录: gulp.task('copy', function() { return gulp.src('src/**/*') .pipe(gulp.dest('dist')) }); gulp拷贝 ...

  7. Nginx简易配置文件(一)(静态页面及PHP页面解析)

    user nobody nobody; worker_processes 4; error_log logs/error.log; pid logs/nginx.pid; events { use e ...

  8. Codeforces Round #377 (Div. 2) B. Cormen — The Best Friend Of a Man(贪心)

     传送门 Description Recently a dog was bought for Polycarp. The dog's name is Cormen. Now Polycarp has ...

  9. php 错误

    ini_set('display_errors', '1');error_reporting(E_ALL ^ E_NOTICE);   有时有了其它框架 应该用它的配置,要不然,你改了,它又改回去了: ...

  10. ES5语法

    ES5新语法主要是体现在Object和.Array操作,同时涉及到JSON. Function.Date 和 String类型上. 1.Object ES5最大的特点是对象扩展很多方法. 新建对象:c ...