编程 Javascript

js实现省市级联效果分享

Posted in Javascript onAugust 10, 2017

本文实例为大家分享了js实现省市级联效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <script type="text/javascript">
    var shengArr =new Array();
    shengArr["广东"]=["广州","深圳","珠海","汕头","韶关"] ;
    shengArr["湖南"]=["长沙","张家界","株洲","怀化","常德"] ;
    shengArr["湖北"]=["武汉","荆州","宜昌","黄冈","仙桃"] ;
    shengArr["安徽"]=["合肥","黄山"] ;
    shengArr["河南"]=["郑州","信阳","洛阳"] ;

    function getSheng(){
      var s =document.getElementById("sheng");

      for(var v in shengArr){
        s.add(new Option(v,v),null);
      }
    }
    function getCity(){
      var s =document.getElementById("sheng");
      var c =document.getElementById("city");
      var v=s.value;
      c.options.length =0;

      for(var i in shengArr[v]){ 
        c.add(new Option(shengArr[v][i],shengArr[v][i]),null);
      }
    }
  </script>

  <!--页面加载时获取 省名-->
  <body onload="getSheng()"> 

    <!-- 改变省时匹配该省的城市名-->
    省：<select id="sheng" onchange="getCity()"> 
      <option>--请选择</option>
    </select>
    市：<select id="city"></select>
  </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现省市级联效果分享

- Author -

Fickle_actor

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 二进制运算技巧解析

Nov 27 Javascript

js 浏览本地文件夹系统示例代码

Oct 24 Javascript

JQuery获取表格数据示例代码

May 26 Javascript

JavaScript中的apply和call函数详解

Jul 20 Javascript

jQuery中prevAll()方法用法实例

Jan 08 Javascript

JavaScript中reduce()方法的使用详解

Jun 09 Javascript

Bootstrap实现响应式导航栏效果

Dec 28 Javascript

深入理解jquery跨域请求方法

May 18 Javascript

JS 面向对象之继承---多种组合继承详解

Jul 10 Javascript

jQuery+Pdo编写login登陆界面

Aug 01 Javascript

BootStrap实现轮播图效果(收藏)

Dec 30 Javascript

使用veloticy-ui生成文字动画效果

Feb 08 Javascript

JavaScript使用Ajax上传文件的示例代码

Aug 10 #Javascript

jquery对table做排序操作的实例演示

Aug 10 #jQuery

基于JavaScript实现飘落星星特效

Aug 10 #Javascript

提高Node.js性能的应用技巧分享

Aug 10 #Javascript

bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

Aug 10 #Javascript

纯js实现页面返回顶部的动画(超简单)

Aug 10 #Javascript

基于daterangepicker日历插件使用参数注意的问题

Aug 10 #Javascript