<!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. css 的包含块 、负外边距，字体，文本行高

    一.包含块 目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元 ...

  2. java笔录---反射机制(1)

    引言   为了方便记忆java的反射机制,在这里仔细的总结了一下.主要是怕以后忘记了,这样也方便回忆.因为最近利用空余时间深入的了解spring和Mybatis框架,   像spring中核心模块IO ...

  3. Python序列化和反序列化

    Python序列化和反序列化 通过将对象序列化可以将其存储在变量或者文件中,可以保存当时对象的状态,实现其生命周期的延长.并且需要时可以再次将这个对象读取出来.Python中有几个常用模块可实现这一功 ...

  4. java对excel表格的上传和下载处理

    Excel表格文件的上传和下载,java中涉及到文件肯定会有io流的知识. 而excel文件就要涉及到poi技术,而excel的版本包括:2003-2007和2010两个版本, 即excel的后缀名为 ...

  5. Java Socket 编程

    1. 背景 网络编程是指编写运行在多个设备(计算机)的程序,这些设备都通过网络连接起来. java.net 包中 J2SE 的 API 包含有类和接口,它们提供低层次的通信细节.你可以直接使用这些类和 ...

  6. 一步一步学MySQL-日志文件

    错误日志 错误日志不用多说,记录了mysql运行过程中的错误信息,当出现问题时,我们可以通过错误日志查找线索. 慢查询日志 可以通过参数long_query_time来设置时间,当sql语句执行超过指 ...

  7. jvm参数解析（含调优过程）

    前阵       对底层账单系统进行了压测调优,调优的最后一步--jvm启动参数中,减小了线程的堆栈空间:-XX:ThreadStackSize=256K,缩减至原来的四分之一,效果明显,不过并没有调 ...

  8. testbench中$display查看例化model里面信号方法以及$realtime用法

    前言 此为测试语法,不可综合: 流程: 1.在tb中可以这么写,检测clk_t_en的高电平,输出仿真时间位置,想查看的cnt_t是底层模块中的.这么会使得时间延迟一个周期: always @(pos ...

  9. Mac实用操作技巧（五）

    让其他人以游客方式登录你的Mac 当有一个哥们对你说:"嘿,把你Mac借我一下,我有点事需要用."这时你肯定不希望自己Mac上保存的资料毫无保留的呈现在别人眼前,那和脱光了衣服站在 ...

  10. Nginx代理TCP服务

    利用nginx代理tpc 部署nginx 安装编译所需环境 # yum install -y apr-devel apr-util-devel pcre-devel openssl-devel 添加w ...