DOM之城市二级联动
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之城市二级联动的更多相关文章
- jq简单城市二级联动实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现城市二级联动列表
这个是一个同事写的,我看着有用,就cv下来了. 程序功能主要逻辑是: 1.当一级标签市显示默认状态 '-请选择-'时,二级标签要隐藏 2.一级标签选中城市时,二级标签显示在页面,并列出响应市区 3.当 ...
- asp.net mvc jQuery 城市二级联动
页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...
- Ajax实现的城市二级联动二
上一篇联动一种只是城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染 1.HTML <select id="province"> <option> ...
- Ajax实现的城市二级联动一
前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html <select id="province"> < ...
- Ajax实现的城市二级联动三
把之前2篇整合在一起 1.html <select id="province"> <option>请选择</option> </selec ...
- 最新城市二级联动json(2017-09)
{ '安徽': [ '合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '阜阳', '宿州', '滁州', '六安', '宣城', '池州', ...
- Ajax案例-基于XML,以POST方式,完成省份-城市二级下拉联动
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...
- 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)
之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...
随机推荐
- 程序的流程控制-分支结构 if
1.分支结构:if语句 第一种格式: /* if(条件表达式){ 语句体; } 其它语句 */ public class IfDemo1{ public static void main(String ...
- 项目Alpha冲刺(团队4/10)
项目Alpha冲刺(团队4/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...
- 项目Alpha冲刺(团队3/10)
项目Alpha冲刺(团队3/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...
- 转载 12步轻松搞定python装饰器
作者: TypingQuietly 原文链接: https://www.jianshu.com/p/d68c6da1587a 呵呵!作为一名教python的老师,我发现学生们基本上一开始很难搞定pyt ...
- 08-部署node节点
部署kubernetes node节点 kubernetes node 节点包含如下组件: Flanneld: 省略,参照之前部署的文档 Docker1.12.5: 省略,参照之前部署的文档 kube ...
- RabbitMQ常见错误1
java.lang.IllegalStateException: Invalid configuration: 'exchange' must be non-null. at com.rabbitmq ...
- app自动化测试之实战应用(百度app简单测试)
模拟在百度app中搜索python相关内容代码如下: from appium import webdriver desired_caps = {} desired_caps['deviceName'] ...
- docker环境 宿主机和容器之间复制文件
容器往宿主机:docker cp 3234234324234:/database_dump_bak/db_bak.dmp /home/test 宿主机往容器:docker cp wenjian_001 ...
- asp.net core的docker实践
如果centos中没有安装和docker和.net core镜像,先安装docker和asp.net core 镜像 安装dockeryum -y install docker-io 启动 Docke ...
- mysql 开发进阶篇系列 38 mysql日志之错误日志log-error
一.mysql日志概述 在mysql中,有4种不同的日志,分别是错误日志,二进制日志(binlog日志),查询日志,慢查询日志.这此日志记录着数据库在不同方面的踪迹(区别sql server里只有er ...