<!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. My97DatePicker常用日期格式

    WdatePicker({ minDate: '%y-%M-%d', maxDate: '#F{$dp.$D(\'GradeEndDate\',{d:-1});}' }); WdatePicker({ ...

  2. 以太坊系列之十六：golang进行智能合约开发

    以太坊系列之十六: 使用golang与智能合约进行交互 以太坊系列之十六: 使用golang与智能合约进行交互 此例子的目录结构 token contract 智能合约的golang wrapper ...

  3. C# LINQ（5）

    目前都是说的单数据差距,如果多数据进行查询LINQ该如何呢? 那么LINQ就应该使用关键字 join on equals 现有代码: static void Main(string[] args) { ...

  4. 数据存储 mongodb

    数据存储 mongodb from pymongo import MongoClient import os base_dir = os.getcwd() class MongoPipeline(ob ...

  5. 使用python-fabric进行远程环境部署

    使用fabric可以通过ssh连接远程终端,对终端进行操作,可以进行远程环境的部署,前提是远程终端已安装openssh-server,且ssh-server开启 安装fabric fabric支持py ...

  6. jeecms学习笔记

    jeecms学习笔记 内容管理系统 1.栏目列表标签 作用:获取栏目的列表 [@cms_channel_list] [#list tag_list as b] <a href="${b ...

  7. 条目十三《尽量使用vector和string来代替使用数组》

    条目十三<尽量使用vector和string来代替使用数组> 数组在现代编程语言中基本都存在,应用可谓广泛,不可或缺,虽然在一些语言中(go)有切片等数据结构,但是数组还是存在的. 但是在 ...

  8. docker加速器配置

    我使用docker的原因 最近自己一直在强迫自己使用docker,一方面是docker的容器化服务,使得每一个配置相互独立,易于维护.而且如果到后面如果深入了的话,通过自己编写dockerfile,那 ...

  9. [SCOI2009]windy数 BZOJ1026 数位dp

    题目描述 windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之间,包括A和B,总共有多少个windy数? 输入输出格式 输 ...

  10. Jupyter Notebook 使用入门

    Jupyter Notebook 简介与安装 Jupyter Notebook 是一款开放源代码的 Web 应用程序,可让我们创建并共享代码和文档. 它提供了一个环境,你可以在其中记录代码,运行代码, ...