js实现省市级联效果分享

本文实例为大家分享了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>

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

赞 (0)

相关推荐

  • JavaScript实现常用二级省市级联下拉列表的方法

    本文实例讲述了JavaScript实现常用二级省市级联下拉列表的方法.分享给大家供大家参考.具体分析如下: 这里省和市的名称都是动态填充,选择省后自动填充城市 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/

  • jquery调取json数据实现省市级联的方法

    本文实例讲述了jquery调取json数据实现省市级联的方法.分享给大家供大家参考.具体如下: 使用jQuery mobile作为创建移动web的框架,需要实现省市级联的功能,具体代码如下(还需要优化的地方): Html代码: jQuery mobile中,有input  list属性,下方紧跟<datalist >标签,中间包含的<option value="XXXX"></option>即为选项,相当于这个input为有下拉列表的功能,当然,in

  • javascript基于DOM实现省市级联下拉框的方法

    本文实例讲述了javascript基于DOM实现省市级联下拉框的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>省市级联下拉框</title

  • JavaScript省市级联下拉菜单实例

    最近学了一个关于省市级联简单的小例子,贴出来与大家分享一下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <select id="selProvince" onchange="chan

  • java json 省市级联实例代码

    复制代码 代码如下: //     获取国家省市区信息$(document).ready(function(){ //从程序获取json格式的数据var info = $request.getAttribute("manualOrderAreaInfo"); var provinceInfo = $("#provinceId");var cityId = $("#cityId"); //清空信息provinceInfo.empty(); //循环

  • javascript省市级联功能实现方法实例详解

    本文实例讲述了javascript省市级联功能实现方法.分享给大家供大家参考,具体如下: 初步实现方法: <html> <head> <script language="javascript"> function changecity(){ var province = document.form1.selprovince.value; var newoption1,newoption2; switch(province){ case "四

  • js实现省市级联效果分享

    本文实例为大家分享了js实现省市级联效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> var shengArr =new Array(); shengArr[&qu

  • 基于JS实现省市联动效果代码分享

    基于JS实现省市联动效果代码分享

    在日常项目开发阶段经常见到下拉框二级联动效果,尤其是涉及地区.品种等有多级选项时.比如说:常见的省市联动下拉框,在选择省份时,城市列表也会更随改变. 思路: 1,所谓联动效果,是指出发父级的数据变化时,会影响到关联性子级数据元素的变化. 下面是造的省市的数据: var linkDatas = { provinces:[ { "code":"0", "name":"请选择" }, { "code":"

  • 用JS实现一个TreeMenu效果分享

    今天学的一点小东西和大家分享一下. 类似TreeMenu控件. 不废话直接代码: 复制代码 代码如下: <script language="javascript"> function control() {//定义函数 if (sMenus3.innerHTML == "+") {//判断展开状态 ulMenu3.style.display = "block";//如果是"+"号 则可以展开 sMenus3.inn

  • js实现省市联动效果的简单实例

    实例如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>省市二

  • js实现日期级联效果

    复制代码 代码如下: <div>        <select name="YYYY" onchange="YYYYMM(this.value)">            <option value="">请选择 年</option>        </select>        <select name="MM" onchange="MMDD(th

  • js省市联动效果完整实例代码

    js省市联动效果完整实例代码

    本文实例讲述了js省市联动效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title></title> <script language="javascript" type="text/javascript"> //定义 城市 数据数组 cityArray = new Array(); cityArray[0] = new Array("北

  • js游戏人物上下左右跑步效果代码分享

    js游戏人物上下左右跑步效果代码分享

    本文实例讲述了js游戏人物上下左右跑步效果.分享给大家供大家参考.具体如下: js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效.你操控着游戏人物,掌控一切是不是很有意思,感兴趣的小伙伴们可以学习一下 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现热气球动画背景登录框代码如下 <!DOCTYPE html>

  • js焦点文字滚动效果代码分享

    js焦点文字滚动效果代码分享

    本文实例讲述了js焦点文字滚动效果.分享给大家供大家参考.具体如下: 效果描述: 今天推荐的这个又是一个原生的js焦点图效果 默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Module模式 基本用法很简单,主要特点有三: 1.模块化,可重用 2.封装了变量和function,和全局的命名空间不接触,不污染全局变量 3.只暴露可用public方法,其他私有方法全部隐藏,确保js相互之间不会冲突 运行效果图:---------------

  • JS文字球状放大效果代码分享

    JS文字球状放大效果代码分享

    很酷的放大镜放大文字的效果,超赞! 先展示一下效果图: 大家先运行代码试一试-------------------------------------效果演示------------------------------------------- 具体代码如下 <html> <head> <title>JS文字球状放大效果</title> <meta http-equiv="imagetoolbar" content="no

随机推荐