• 【案例】城市地址三级联动


    注意点:

    1、<option value=""></option>    value值的设置

    2、select的onchange事件

    <!DOCTYPE html>

    <html lang="en">

    <head>

            <meta charset="UTF-8">

            <title>城市地址三级联动</title>

            <style>

                     *{

                             margin:0;

                             padding:0;

                     }

                     #pro,#city,#county{

                             120px;

                             height: 30px;

                             margin-left: 10px;

                             margin-top: 20px;

                     }

                     #city,#county{

                             display: none;

                     }

            </style>

            <!--引入一个包含地址信息的对象的js文件-->

            <script src="./location.js"></script>

    </head>

    <body>

            <select name="" id="pro"></select>

            <select name="" id="city"></select>

            <select name="" id="county"></select>

    </body>

    <script>

            //获取元素

            var pro = document.getElementById('pro');

            var city = document.getElementById('city');

            var county = document.getElementById('county');

            var proStr = '<option value="">请选择</option>';

            for(var i in address[0]){

                     proStr += '<option value="0,'+ i +'">'+ address[0][i] +'</option>';

            }

            pro.innerHTML = proStr;

            //省发生改变时,显示相应的市

            pro.onchange = function(){

                     city.style.display = 'inline-block';

                     var cityStr = '<option value="">请选择</option>';

                     var index = this.value;

                     if(index == ''){

                             city.style.display = 'none';

                             county.style.display = 'none';

                             return;

                     }

                     for(var i in address[index]){

                             cityStr += '<option value="'+ index +','+ i +'">'+ address[index][i] +'</option>';

                     }

                     city.innerHTML = cityStr;

            }

            //市发生改变时,显示相应的县

            city.onchange = function(){

                     county.style.display = 'inline-block';

                     var countyStr = '<option value="">请选择</option>';

                     var index = this.value;

                     if(index == ''){

                             county.style.display = 'none';

                             return;

                     }

                     for(var i in address[index]){

                             countyStr += '<option value="">'+ address[index][i] +'</option>';

                     }

                     county.innerHTML = countyStr;

            }

    </script>

    </html>

  • 相关阅读:
    提高电脑运行效率
    Android_实验小心得_持续补充中......
    LNMP环境搭建wordpress
    php安装
    mysql、MariaDB(yum)
    Nginx配置(yum)
    httpd配置(yum)
    jumpserver环境搭建
    命令
    vsftpd
  • 原文地址:https://www.cnblogs.com/sherryStudy/p/city_address3.html
Copyright © 2020-2023  润新知