zoukankan      html  css  js  c++  java
  • 三级联动(省,市,县)

    今天没事干复习一下之前做的东西,突然想到做个三级联动的列表,我个人觉得做这个主要练习数组的运用,

    做这个时只要脑子里有顺序就不会太麻烦,在点击上一个的时候自己要知道即将执行哪个函数,数组将会怎样进行查找,通过捋顺自己的思路,你就会觉得好简单,只不过是循环罢。

      以下是举的一个小例子的源代码(随便写的)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>城市查询</title>

    </head>

    <body>
    <select name="province" id="province">
    <option value="省份" selected="selected">省份</option>
    </select>

    <select name="city" id="city">
    <option value="城市" id="sx" selected="selected">所在市/区</option>
    </select>

    <select name="xian" id="xian">
    <option value="县城" id="xc" selected="selected">所在县/区 </option>
    </select>
    <script type="text/javascript">
    // 省 市 县
    var province = document.getElementById('province');
    var city = document.getElementById('city');
    var xiancheng = document.getElementById('xian');

    //城市
    var cityArr = [];
    cityArr[0] = ['北京市',['东城区','建国门街道','朝阳门街道']];
    cityArr[1] = ['天津市',['南开区','八里台街','长虹街','鼓楼街','广开街','华苑','街嘉陵道','街体育中心街','兴南街']];
    cityArr[2] = ['上海市',['浦东新区','陆家嘴街道','周家渡街道','塘桥街道']];
    cityArr[3] = ['重庆市',['万盛区','南桐','青年','石林']];
    cityArr[4] = ['河北省',['石家庄市','新华区','长安区'],['唐山市','滦县','迁西县']];
    cityArr[5] = ['河南省',['郑州市','中原区','金水区'],['开封市','兰考县','龙亭区'],['洛阳市','汝阳县','孟津县'],['周口市','川汇区','扶沟县','西华县','商水县'],['驻马店市','驻马店驿城区','西平县','上蔡县','正阳县']];
    cityArr[6] = ['云南省',['昆明市','盘龙区','五华区','西山区','东川区']];
    //省份
    for(var i=0 ;i< cityArr.length;i++) {
    var provinceOption = document.createElement('option');
    provinceOption.text = cityArr[i][0];
    province.options.add(provinceOption);
    }
    var sx=document.getElementById("sx");
    // 获取相应县市
    function getcity(pro,city,cityArr){
    sx.style.display="none";
    var P_value=pro.value;
    var length=cityArr.length;
    city.length = 1;
    for(var i=0;i<length;i++){
    if(P_value==cityArr[i][0]){
    for(var j=1;j<cityArr[i].length;j++){
    var pre=document.createElement('option');
    pre.text=cityArr[i][j][0];
    city.options.add(pre);
    }
    }
    }
    }
    //县城的加载
    function getcounty(city,county,cityArr){
    var P_value=city.value;
    var length=cityArr.length;
    county.length = 1;
    for(var i=0;i<length;i++){
    for(var a=1;a<cityArr[i].length;a++) {
    if (P_value == cityArr[i][a][0]) {
    for (var j = 1; j < cityArr[i][a].length; j++) {
    var pre = document.createElement('option');
    pre.text = cityArr[i][a][j];
    county.options.add(pre);
    }
    }
    }
    }
    }
    // 当鼠标点击省份时执行的方法
    province.onchange = function() {
    getcity(province,city,cityArr);
    }
    //  当鼠标点击城市时执行的方法
    city.onchange = function() {
    getcounty(city,xiancheng,cityArr);
    }
    </script>
    </body>
    </html>

    做这个时只要脑子里有顺序就不会太麻烦,在点击上一个的时候自己要知道即将执行哪个函数,数组将会怎样进行查找,通过捋顺自己的思路,你就会觉得好简单,只不过是循环罢
    写的有点麻烦,不过你可以再简化一点,在循环中可以适当的进行修改以增加代码的运行效率



  • 相关阅读:
    问题:android学习内容破碎,我个人关于如何学习android的一些个人经历
    问题:一球从某高度自由落下,每次落地后反跳回原高度的一半;再落下,求它在第n次落地时,共经过多少米?第n次反弹多高?
    问题:alias设置与删除
    问题:从键盘读取特定类型的数据(使用Scanner读取int类型)
    求一个数组当中最大(最小)值的两种计算方法
    Mysql5.7安装
    maven下载及安装
    Ubuntu下修改DNS重启也能用的方法
    删除CNNIC证书
    字符编码ASCII, Unicode和UTF-8概念扫盲
  • 原文地址:https://www.cnblogs.com/pengtaotao/p/6388827.html
Copyright © 2011-2022 走看看