zoukankan      html  css  js  c++  java
  • 三级联动代码

    html代码:

    <html>
    <head>
    <title>liandong.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="js/liandong.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    </head>

    <body>
    <select class="sel1" name="s1">
    <option value="">请选择1</option>
    <option value="春">春</option>
    <option value="夏">夏</option>
    <option value="秋">秋</option>
    <option value="冬">冬</option>
    </select>
    <select class="sel2" name="s2">
    <option value="">请选择2</option>
    </select>
    <select class="sel3" name="s3">
    <option value="">请选择专业3</option>
    </select>
    </body>
    </html>

    jQuery代码:

    $(document).ready(function() {
    var index=-1;
    var indey=-1;
    var arr1=["春","夏","秋","冬"];
    var arr2=[["1","2","3"],["4","5","6"],["7","8","9"],["10","11","12"]];
    var arr3=[[['a','b','c'],['d','e','f'],['h','i','j']],[['k','l','m'],['n','o','p'],['q','r','s']],[['t','u','v'],['w','x','y'],['z','g','a1']],[['b1','c1','d1'],['e1','f1','g1'],['h1','i1','j1']]];
    $("select[name='s1']").change(function() {

    var val1=$(this).val();
    for ( var x = 0; x < arr1.length; x++) {

    if(val1==arr1[x]){
    index=x;
    break;
    }
    }
    $("select[name='s2'] option:gt(0)").remove();
    var array1=arr2[index];
    for ( var i = 0; i < array1.length; i++) {
    $("<option value='"+array1[i]+"'>"+array1[i]+"</option>").appendTo($("select[name='s2']"));
    }
    $("select[name='s2']").change(function() {
    var val2=$(this).val();
    out:for ( var x1 = 0; x1 < arr2.length; x1++) {

    for(var y=0;y<arr2[x1].length;y++){
    if(val2==arr2[x1][y]){
    index=x1;
    indey=y;
    break out;
    }
    }
    }
    var array2=arr3[index][indey];
    $("select[name='s3'] option:gt(0)").remove();
    for ( var i = 0; i < array2.length; i++) {
    $("<option value='"+array2[i]+"'>"+array2[i]+"</option>").appendTo($("select[name='s3']"));
    }
    });
    });

    });

  • 相关阅读:
    CentOS7 安装Redis Cluster集群
    CentOS7 安装Redis 单机版
    CentOS7 配置免密登陆
    深入java虚拟机学习 -- 内存管理机制
    深入java虚拟机学习 -- 类的卸载
    深入java虚拟机学习 -- 类的加载机制(四)
    深入java虚拟机学习 -- 类的加载机制(三)
    深入java虚拟机学习 -- 类的加载机制(续)
    (原创)cocos lua 热更新从零开始(一)最简单demo
    lua 调用参数报错(a userdata value)
  • 原文地址:https://www.cnblogs.com/fengyiting/p/4949787.html
Copyright © 2011-2022 走看看