<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 定义二维数组:
var arr = new Array(4);
arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
arr[1] = new Array("长春市","吉林市","四平市","通化市");
arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");

/*
1.确定事件: onchange事件
2.事件触发函数
3.函数要干点事
1.获取当前选中了哪个省份
2.获得省份所对应的所有城市
3.遍历所有的城市
4.动态创建 <option>深圳</option>
5.将创建的结构挂到cityselect中
*/
function selectPro(value){
//alert(value);
// 2.获得省份所对应的所有城市
var cities = arr[value];

var citySelect = document.getElementById("city");

// console.log(citySelect.innerHTML);
//清空原有的内容
//citySelect.innerHTML ="";
citySelect.options.length = 0;


// 3.遍历所有的城市
for(var i=0;i<cities.length;i++){
//获取城市文本内容
var cityName = cities[i];
//console.log(cityName);

//4. 创建option <option></option>
var opt1 = document.createElement("option");
//5. 创建城市文本节点
var textNode = document.createTextNode(cityName);
//6. <option>文本节点</option>
opt1.appendChild(textNode);

//7.将创建好的结构添加到
var citySelect = document.getElementById("city");
citySelect.appendChild(opt1);
}
}
</script>
</head>
<body>
<form action="#" method="get">
<input type="hidden" name="id" value="007"/>
姓名:<input name="username" value="xuduoduo"/><br>
密码:<input type="password" name="password" value="123"><br>
性别:<input type="radio" name="sex" value="1" checked="checked">男
<input type="radio" name="sex" value="0">女
<br>
爱好:<input type="checkbox" name="hobby" value="eat">吃
<input type="checkbox" name="hobby" value="drink" checked="checked">喝
<input type="checkbox" name="hobby" value="sleep" checked="checked">睡
<br>
头像:<input type="file" name="photo"><br>
籍贯:
<select name="pro" onchange="selectPro(this.value)">
<option >-请选择-</option>
<option value="0">黑龙江</option>
<option value="1">吉林</option>
<option value="2">辽宁</option>
<option value="3">河南</option>
</select>
<select name="city" id="city">
<option >-请选择-</option>

</select>
<br>
自我介绍:
<textarea name="intr" cols="40" rows="4">good!</textarea>
<br>
<input type="submit" value="保存"/>
<input type="reset" />
<input type="button" value="普通按钮"/>
</form>
</body>
</html>
<!--

-->

JavaScript实现省市联动的更多相关文章

  1. javascript数组&省市联动分别用js数组和JSON实现

    1.定义数组的三种方式: **数组可以存放不同的数据类型   第一种: var arr=[1,2,3];   var arr=[1,"2",true];   第二种: 使用内置对象 ...

  2. 通过Javascript数组设计一个省市联动菜单

    通过Javascript数组设计一个省市联动菜单 使用Option内置类来完成下拉选项的创建 2.使用定时器实现一个时钟程序 3.使用PHP+JSON完成语音验证码 网址:http://yuyin.b ...

  3. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  4. html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. JavaScript基础4——省市联动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. JavaScript(JS)实现省市联动选择下拉列表

    在开发一个应用的时候需要用刀省市联动的下拉列表,网上找到不少.但是要么太复杂,难以修改:要么根本就用不了,最后自己在一个示例中提取出数据,然后自己写了一个,简单易懂,适合新手... 代码如下: Pro ...

  7. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  8. AJAX案例四：省市联动

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  9. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

随机推荐

  1. 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼

    2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼   转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升:IE10 随着 Windows 8 在 ...

  2. zabbix_server---微信报警

    (1)         企业应用-创建应用 1.除了对个人添加微信报警之外,还可以添加不同管理组,接受同一个应用推送的消息, 成员账号,组织部门ID,应用Agent ID,CorpID和Secret, ...

  3. 编写一个类，其中包含一个排序的方法Sort(),当传入的是一串整数，就按照从小到大的顺序输出，如果传入的是一个字符串，就将字符串反序输出。

    namespace test2 { class Program { /// <summary> /// 编写一个类,其中包含一个排序的方法Sort(),当传入的是一串整数,就按照从小到大的 ...

  4. swift 获取文件的Md5值

    获取文件的Md5值的方法如下 func md5File(url: URL) -> String? { let bufferSize = 1024 * 1024 do { //打开文件 let f ...

  5. Centos 7.3 安装mysql5.7.19 各种调试就不多说了

    mysql 5.7.19linux-glibc2.12 (x86_64) 安装 1.在安装目录进行解压2.mv解压目录为mysql3.创建mysql的用户 useradd -s /sbin/nolon ...

  6. 在myeclipse的jsp编辑器中怎么把Source/Preview调出来的方法步骤

    1.点击要打开的jsp 文件. 右键.选择 open with -->  MyEclipse Visual JSP Designer 就好了. 2. 如果想所有的jsp  都默认使用 这个可视化 ...

  7. [转载]Splay Tree数组实现+详解

    变量声明:f[i]表示i的父结点,ch[i][0]表示i的左儿子,ch[i][1]表示i的右儿子,key[i]表示i的关键字(即结点i代表的那个数字),cnt[i]表示i结点的关键字出现的次数(相当于 ...

  8. SpringBoot整合Mybatis之项目结构、数据源

    已经有好些日子没有总结了,不是变懒了,而是我一直在奋力学习springboot的路上,现在也算是完成了第一阶段的学习,今天给各位总结总结. 之前在网上找过不少关于springboot的教程,都是一些比 ...

  9. Linux - 简明Shell编程15 - 调试（Debug）

    脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 #!/bin/bash -x for filename ...

  10. 从理解开始 谈谈px rem 和 em 的区别与联系

    概述 古语有云,没有规矩则不成方圆.秦灭六国之后为了促进国内生产力的发展,也是大力推进全国度量衡的统一.车同轨,书同文.与"尺寸"相关的问题(手动滑稽),从古至今一直为人们所关注. ...