<!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. github 或者gitlab 设置添加SSH

    克隆项目二种方式: 1. 使用https url克隆,   复制https url 然后到 git clone https-url 2.使用 SSH url 克隆却需要在克隆之前先配置和添加好 SSH ...

  2. echarts_部分图表配置简介_横向柱状图

    横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下: var myChart = echarts.init(d ...

  3. [Git] 1、常用Git命令行总结（一）

    一.GIT CLONE最常用的有如下几个 1.最简单直接的命令:git clone xxx.git 2.如果想clone到指定目录:git clone xxx.git “指定目录” 3.clone时创 ...

  4. iframe嵌入页面不能全部展示

    在嵌入页面不能全部展示的问题中,可以通过js改变iframe的高度 html部分代码: <iframe src="#" name="i" id=" ...

  5. theOS环境搭建

    http://joeyio.com/ios/2014/01/01/make-a-mobile-substrate-tweak-using-theos/~/Doucment>: cd mytwea ...

  6. 扩展Python模块系列(三)----参数解析与结果封装

    在上一节中,通过一个简单的例子介绍了C语言扩展Python内建模块的整体流程,从本节开始讲开始深入讨论一些细节问题,在细节讨论中从始至终都会涉及[引用计数]的问题.首先讨论C语言封装的Python函数 ...

  7. Python解析PDF三法

    span{line-height:2em} --> 最近做调研想知道一些NZ当地的旅游信息,于是在NZ留学的友人自高奋勇地帮我去各个加油站拿了一堆旅游小册子,扫描了发给我. 但是他扫描出的高清图 ...

  8. 学问Chat UI(2)

    前言 上文讲了下要去做哪些事,重点分析了融云Sdk中RongExtension这个扩展控件,本文来学习下同样是融云Sdk中的AutoRefreshListView如何适配多种消息的实现方式,写的有不足 ...

  9. django开发者模式中的autoreload是怎样实现的

    在开发django应用的过程中,使用开发者模式启动服务是特别方便的一件事,只需要 python manage.py runserver 就可以运行服务,并且提供了非常人性化的autoreload机制, ...

  10. IOS中的单例设计模式

    单例设计模式是IOS开发中一种很重要很常用的一种设计模式.它的设计原理是无论请求多少次,始终返回一个实例,也就是一个类只有一个实例.下面是苹果官方文档中关于单例模式的图片: 如图所示,左边的图是默认的 ...