1、HTML内容

<select id="province">
<option>请选择</option>
<option>山东省</option>
<option>吉林省</option>
<option>上海市</option>
</select>
<select id="city">
<option>请选择</option>
</select>

2、JS

var provinceE=document.getElementById("province");
provinceE.onchange=function(){
var city=document.getElementById("city");
var opts=city.getElementsByTagName("option");
for(var z=opts.length-1;z>0;z--){
city.removeChild(opts[z]);
}
var province=provinceE.value;
//alert(province);
var citys=[];
switch (province){
case "山东省":
citys=["青岛市","济南市","威海市","日照市","德州市"];
break;
case "吉林省":
citys=["长春市","四平市","辽源市","通化市","白山市"];
break;
case "上海市":
citys=["嘉定区","普陀区","黄浦区","虹口区","长宁区"];
break;
}
for(var i=0;i<citys.length;i++){
var option=document.createElement("option");
var textNode=document.createTextNode(citys[i]);
option.appendChild(textNode);
city.appendChild(option);
} }

DOM之城市二级联动的更多相关文章

  1. jq简单城市二级联动实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  3. asp.net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

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

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

  5. Ajax实现的城市二级联动一

    前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html <select id="province"> < ...

  6. Ajax实现的城市二级联动三

    把之前2篇整合在一起 1.html <select id="province"> <option>请选择</option> </selec ...

  7. 最新城市二级联动json(2017-09)

    { '安徽': [ '合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '阜阳', '宿州', '滁州', '六安', '宣城', '池州', ...

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

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

  9. 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...

随机推荐

  1. 程序的流程控制-分支结构 if

    1.分支结构:if语句 第一种格式: /* if(条件表达式){ 语句体; } 其它语句 */ public class IfDemo1{ public static void main(String ...

  2. 项目Alpha冲刺(团队4/10)

    项目Alpha冲刺(团队4/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  3. 项目Alpha冲刺(团队3/10)

    项目Alpha冲刺(团队3/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  4. 转载 12步轻松搞定python装饰器

    作者: TypingQuietly 原文链接: https://www.jianshu.com/p/d68c6da1587a 呵呵!作为一名教python的老师,我发现学生们基本上一开始很难搞定pyt ...

  5. 08-部署node节点

    部署kubernetes node节点 kubernetes node 节点包含如下组件: Flanneld: 省略,参照之前部署的文档 Docker1.12.5: 省略,参照之前部署的文档 kube ...

  6. RabbitMQ常见错误1

    java.lang.IllegalStateException: Invalid configuration: 'exchange' must be non-null. at com.rabbitmq ...

  7. app自动化测试之实战应用(百度app简单测试)

    模拟在百度app中搜索python相关内容代码如下: from appium import webdriver desired_caps = {} desired_caps['deviceName'] ...

  8. docker环境 宿主机和容器之间复制文件

    容器往宿主机:docker cp 3234234324234:/database_dump_bak/db_bak.dmp /home/test 宿主机往容器:docker cp wenjian_001 ...

  9. asp.net core的docker实践

    如果centos中没有安装和docker和.net core镜像,先安装docker和asp.net core 镜像 安装dockeryum -y install docker-io 启动 Docke ...

  10. mysql 开发进阶篇系列 38 mysql日志之错误日志log-error

    一.mysql日志概述 在mysql中,有4种不同的日志,分别是错误日志,二进制日志(binlog日志),查询日志,慢查询日志.这此日志记录着数据库在不同方面的踪迹(区别sql server里只有er ...