<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="province" onchange="func1(this)"></select>
    <select id="city"></select>
    <script>
        data={"安徽":["马鞍山","合肥","芜湖","铜陵","蚌埠"],"江苏":["南京","苏州","无锡","常州","南通"],"山东":["济南","青岛","即墨","蓬莱","泰州"]};
        var pro=document.getElementById("province");      //找到省份的标签对象
        var cit=document.getElementById("city");          //找到城市的标签对象

        for (var k in data){                              //遍历data数据 k是键 省份名
            var opt=document.createElement("option");       //创建option的标签
            pro.appendChild(opt);                           //添加创建的option标签到省份里
            opt.innerHTML=k;                                 // 把k的键的文本 添加到标签内
            }

        function func1(ev) {
            cit.options.length=0;                           //这里使用了技巧 用options.length=0清空了每次点击后添加的option
            for(var i in data[ev.value] ){                 // this.value是原来省份里的键值 
                var op=document.createElement("option");         //创建option的标签

                cit.appendChild(op);                         //添加创建的option
                op.innerHTML=data[ev.value][i];              // 注意: i不是键内数据的内容 是索引 不能直接=i
            }
        }

    </script>
</body>
</html>
================== 注:这里并没有直接在HTML里写死静态代码,因为如果数据的添加和修改会很麻烦,用JS语句控制只需要修改DATA数据即可==========================

PS: 学习的过程是一点一滴的积累,不是聪明就能成功!

js 省份城市二级动态联动的例子的更多相关文章

  1. Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...

  2. 省份-城市-区域三级联动【struts2 + ajax +非数据库版】

    package loaderman; /** * 实体,封装省份和城市 */ public class Bean { private String province;//省份 private Stri ...

  3. js实现城市二级联动列表

    这个是一个同事写的,我看着有用,就cv下来了. 程序功能主要逻辑是: 1.当一级标签市显示默认状态 '-请选择-'时,二级标签要隐藏 2.一级标签选中城市时,二级标签显示在页面,并列出响应市区 3.当 ...

  4. ajax+struts2 实现省份-城市-地区三级联动

    1.需求分析 2.js部分(通过ajax异步请求实现) 省份-->城市联动 城市-->地区 3.struts部分 struts.xml action部分 4.service部分 5.总结 ...

  5. js 全国城市3级联动

    js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ ...

  6. jquery json实现二级动态联动

    以下为代码!需要导入json架包 function getCity1(){ var unitid = document.getElementById('addformunitid').value; $ ...

  7. 《DWZ笔记一》<select>动态联动菜单

    联动菜单,即组合框Combo box,在DWZ文档中对组合框combox的是这样描述的: 在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name ...

  8. xml+js+html的二级联动

    首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...

  9. Ajax实现的城市二级联动二

    上一篇联动一种只是城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染 1.HTML <select id="province"> <option> ...

随机推荐

  1. MSSQL中数据库对象类型解释

    public string GetObjectTypeName(object oType) { switch (oType+"") { case "U": re ...

  2. 拆半搜索binary_search

    //binary_search用于在有序的区间用拆半查找搜索等于某值得元素 #include<algorithm> #include<iostream> using names ...

  3. jmeter函数助手（_random、_time）

    jmeter函数助手 __random __time yyyyMMddHHmmdd  时间格式(年月日时分秒) 1.打开函数助手对话框,选项->函数助手对话框 2.生成函数字符串 (1)选择功能 ...

  4. 通过 js 修改 html 的文本内容或者样式

    通过 js 修改 html 的文本内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  5. mybatis 学习笔记（三）：mapper 代理开发 dao 层

    mybatis 学习笔记(三):mapper 代理开发 dao 层 优势 通过使用mapper 代理,我们可以不需要去编写具体的实现类(使用 getMapper() 方法自动生成),只需编写接口即可, ...

  6. 洛谷P2764 最小路径覆盖问题（最大流）

    传送门 先说做法:把原图拆成一个二分图,每一个点被拆成$A_i,B_i$,若原图中存在边$(u,v)$,则连边$(A_u,B_v)$,然后$S$对所有$A$连边,所有$B$对$T$连边,然后跑一个最大 ...

  7. spark-2.2.1在centos7安装

    前言 在安装Spark之前,我们需要安装Scala语言的支持.在此我选择的是scala-2.11.12版本.jdk8也要保证已经安装好并且配置好环境变量 scala-2.11.12下载 为了方便,我先 ...

  8. SDUT OJ 3403 数据结构实验之排序六：希尔排序

    数据结构实验之排序六:希尔排序 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descrip ...

  9. ansible基本模块-cron

    ansible   XXX   -m   cron   -a   "name=‘XXX ’   job=‘执行的命令’   minute=XXX "                ...

  10. ansible基本模块-copy

    ansible   XXX   -m copy  -a  “src=XXX  dest=XXX  owner=root  group=root  mode=0755”