JS做出地址选择功能-js教程-PHP中文网

JS做出地址选择功能

php中世界最好的语言

发布： 2018-04-19 10:23:03

原创

2211人浏览过

这次给大家带来JS做出地址选择功能，JS做出地址选择功能的注意事项有哪些，下面就是实战案例，一起来看一下。

<!DOCTYPE html>
<html>
  <head>
    <metacharset="UTF-8">
    <title></title>
    <script>
      var shenArr = new Array(5);
      shenArr["广东"] = ["广州","深圳","韶关","汕头","茂名"];
      shenArr["湖南"] = ["长沙","张家界","株洲","岳阳","吉首"];
      shenArr["湖北"] = ["武汉","宜昌","荆州","黄冈","仙桃"];
      shenArr["安徽"] = ["合肥","黄山"];
      shenArr["河南"] = ["郑州","开封","洛阳","信阳"];
       function getShen(){
        var s = document.getElementById("shen");
        for(var v in shenArr){
          //把数组键加入到省的下拉框
          s.add(new Option(v,v),null);
        }
       }
 
      function getCity(){
        var s = document.getElementById("shen");
        var c = document.getElementById("city");
        var v = s.value;//省份的名称，也是数组中的键
        c.options.length = 0;//把城市下拉框中的项清除
 
        //循环把某一个省的城市加入到市的下拉框
        for(var i in shenArr[v] ){
          c.add(new Option(shenArr[v][i],shenArr[v][i]),null);
        }
 
      }
 
    </script>
  </head>
  <bodyonload="getShen()">
    省:<selectid="shen"onchange="getCity()">
      <optionvalue="0">--请选择--</option>
    </select>
    市:<selectid="city"></select>
  </body>
</html>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

input输入框内容实时获取

vue实现点击图片放大功能（附代码）

v1.6.2蝉知商城专业版

蝉知商城以插件的形式发布，需要安装zend guard loader扩展。安装好zend后可以在后台--平台--扩展内安装，或根据php版本选择下面的下载地址，下载后本地安装。一、功能列表 1.集成工单系统 2.新增订单自定义接口功能 3.优化新订单跟订单留言的提醒功能 4.新增FAQ功能 5.全面兼容蝉知5.3.3 二、功能展示订单自定义接口功