zoukankan      html  css  js  c++  java
  • 三级联动练习

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>三级联动</title>
    </head>
    <body>
    省:
    <select style=" 100px;" id="pre" onchange="chg(this);">
    <option value="-1">请选择</option>
    </select>
    市:
    <select style=" 100px;" id="city" onchange="chg2(this)" ;></select>
    区:
    <select style=" 100px;" id="area"></select>
    </body>
    <script>
    //声明省
    var pres = ["北京", "上海", "山东"]; //直接声明Array
    //声明市
    var cities = [
    ["东城", "昌平", "海淀"],
    ["浦东", "高区"],
    ["济南", "青岛"]
    ];
    var areas = [
    [
    ["东城1", "东城2", "东城3"],
    ["昌平1", "昌平2", "昌平3"],
    ["海淀1", "海淀2", "海淀3"]
    ],
    [
    ["浦东1", "浦东2", "浦东3"],
    ["高区1", "高区2", "高区3"]
    ],
    [
    ["济南1", "济南2"],
    ["青岛1", "青岛2"]
    ]
    ]
    //设置一个省的公共下标
    var pIndex = -1;
    var preEle = document.getElementById("pre");
    var cityEle = document.getElementById("city");
    var areaEle = document.getElementById("area");
    //先设置省的值
    for (var i = 0; i < pres.length; i++) {
    //声明option.<option value="pres[i]">Pres[i]</option>
    var op = new Option(pres[i], i);
    //添加
    preEle.options.add(op);
    }
    function chg(obj) {
    if (obj.value == -1) {
    cityEle.options.length = 0;
    areaEle.options.length = 0;
    }
    //获取值
    var val = obj.value;
    pIndex = obj.value;
    //获取ctiry
    var cs = cities[val];
    //获取默认区
    var as = areas[val][0];
    //先清空市
    cityEle.options.length = 0;
    areaEle.options.length = 0;
    for (var i = 0; i < cs.length; i++) {
    var op = new Option(cs[i], i);
    cityEle.options.add(op);
    }
    for (var i = 0; i < as.length; i++) {
    var op = new Option(as[i], i);
    areaEle.options.add(op);
    }
    }
    function chg2(obj) {
    var val = obj.selectedIndex;
    var as = areas[pIndex][val];
    areaEle.options.length = 0;
    for (var i = 0; i < as.length; i++) {
    var op = new Option(as[i], i);
    areaEle.options.add(op);
    }
    }
    </script>
    </html>

  • 相关阅读:
    函数输出参数 双重指针
    NotePad++ 支持日语字体
    C++ 前置操作符与后置操作符
    用js判断 iPhone6 iPhone6 plus iphonex?
    从浏览器输入一个地址到渲染出网页这个过程发生了什么???
    对.Net 垃圾回收Finalize 和Dispose的理解
    在.NET环境中使用单元测试工具NUnit
    信道
    asp.net 获取当前URL的正确方法
    ASP.NET中常用输出JS脚本的类
  • 原文地址:https://www.cnblogs.com/new-Spring/p/5839850.html
Copyright © 2011-2022 走看看