<!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. .Net 项目代码风格规范

    最近没啥时间自己状态也不是很好,公司的事情忙,自己也有一些事情要处理,所以好久没有写博客了.利用公司午休时间写一写,以下是参考了一些资料,整理出来,共勉之. 代码风格没有正确与否,重要的是整齐划一,清 ...

  2. Office Diary(工作日记本)

    Office Diary 是一款免费.绿色小巧的写日记和收集文档资料的软件,界面效仿Office Word ,支持Word中常用的文字编辑排版功能,可以作为Microsoft Office产品系列的强 ...

  3. 十四、JS同步异步知识点，重点（Node.js-fs模块补充篇）

    (本片文章如果你能耐着性子看我,保证会对同步和异步有一个非常深刻的理解) JavaScript是单线程执行,所谓的单线程呢就是指如果有多个任务就必须去排队,前面任务执行完成后,后面任务再执行.因为Ja ...

  4. linux虚拟机安装mysql(Mysql-5.7.10)

    注:MySQL5.5版本开始弃用了常规的configure编译方法,通过cmake来编译.需要下载安装cmake编译器.boost库.ncurses库.GNU分析器生成器bison 1. 安装基础环境 ...

  5. 汇编Shellcode的技巧

    汇编Shellcode的技巧 来源  https://www.4hou.com/technology/3893.html 本文参考来源于pentest 我们在上一篇提到要要自定义shellcode,不 ...

  6. 【bzoj3512】DZY Loves Math IV 杜教筛+记忆化搜索+欧拉函数

    Description 给定n,m,求\(\sum_{i=1}^{n}\sum_{j=1}^{m}\varphi(ij)\)模10^9+7的值. Input 仅一行,两个整数n,m. Output 仅 ...

  7. mysql双机互相备份

    互备/***************************************master服务器**************************************/vi my.cnf[ ...

  8. Python实例手册

    在电脑中突然发现一个这么好的资料,雪松大神制作,不敢独享,特与大家共享.连他的广告也一并复制了吧! python实例手册 #encoding:utf8 # 设定编码-支持中文 0说明 手册制作: 雪松 ...

  9. Zookeeper客户端对比选择_4

    Zookeeper客户端对比选择 本文思维导图 使用框架的好处是自带一套实用的API,但是Zookeeper虽然非常强大,但是社区却安静的可怕,版本更新较慢,下面会先从zookeeper原生API的不 ...

  10. 29.最小的K个数

    题目描述:   输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 思路分析:   利用快速排序的partition函数,par ...