<!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. web api 设置允许跨域，并设置预检请求时间

    <httpProtocol> <customHeaders> <!--响应类型 (值为逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法)--> <ad ...

  2. Android Camera相机功能实现 拍照并保存图片

    AndroidManifest.xml <uses-feature android:name="android.hardware.camera"/> <uses- ...

  3. My97DatePicker常用日期格式

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

  4. 一条命令深度清理你的mac

    一条命令深度清理你的mac mac 用了一段时间后很快发现硬盘空间不够了,就想找一些磁盘清理的工具,但是发现居然都是收费的. 就手工操作吧.方法其实非常简单. 就一条命令, cd / du -hd 5 ...

  5. tomcat访问日志关闭

    在tomcat(实例)路径下[conf/server.xml]中修改,以下节点(注释掉该节点): tomcat catalina.out日志关闭 在tomcat(主目录)路径下[bin/catalin ...

  6. JVM之类加载机制

    JVM之类加载机制 JVM类加载机制分为五个部分:加载,验证,准备,解析,初始化,下面我们就分别来看一下这五个过程. 类加载五部分 加载 加载是类加载过程中的一个阶段,这个阶段会在内存中生成一个代表这 ...

  7. 泛型1(一些algorithm函数)

    泛型算法本身不会执行容器的操作,它们只会运行于迭代器之上,执行迭代器的操作.因此算法可能改变容器中保存的元素,也可能在容器内移动元素,但永远不会直接添加或删除元素. 只读算法: accumulate: ...

  8. Linux--CentOS7使用firewalld打开关闭防火墙与端口

    1.firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status f ...

  9. oracle导出clob 工具

    oracle导出clob 等大字段,用pl/sql 等无法导出,除了备份数据库,但是一般数据库中正式环境数据和开发环境中数据不一定完全一致或者合适导出,即使仅仅导出导入一个表,有时候也不方便或者业务上 ...

  10. VS2019和net core 3.0(整理不全，但是孰能生巧)

    更新 net core 3.0 只能配合vs2019 net core 3.0 新特性 详情 IntelliCode 智能插件 live share ctrl+. 快速重构 调试中的数据断点(很棒) ...