EfonMark

一番码客 : 挖掘你关心的亮点。
http://www.efonmark.com

本文目录:

[TOC]

image-20200115080829801

思路分析

  1. 获取city的下拉列表。
  2. 清空下拉列表。
  3. 创建option节点。
  4. 把新建的option节点追加到城市下拉框中。

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
form {
text-align: center;
}
img {
margin-bottom: 20px;
}
</style>
<script>
// 定义二维数组:
var arr = new Array(4);
arr[0] = new Array("哈尔滨", "齐齐哈尔", "大庆", "佳木斯");
arr[1] = new Array("长春市", "吉林市", "四平市", "通化市");
arr[2] = new Array("沈阳市", "锦州市", "大连市", "铁岭市");
arr[3] = new Array("郑州市", "洛阳市", "安阳市", "南阳市");

function proChanged(obj) {
// 获取city的下拉列表
var cityTag = document.getElementById("city");
// 清空下拉列表
cityTag.innerHTML = "<option>-请选择-</option>";

var cityArr = arr[obj.value];
for(var i = 0; i < cityArr.length; i++) {
// 创建option节点
var opt = document.createElement("option");
opt.innerHTML = cityArr[i];
// 把新建的option节点追加到城市下拉框中
cityTag.appendChild(opt);
}
}
</script>
</head>

<body>
<form action="#" method="get">
<img src="../img/logo.png" width="30%"/><br />
<input type="hidden" name="id" value="007" /> 姓名:
<input name="username" value="efonfighting" /><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" id="pro" onchange="proChanged(this)">
<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">挖掘你关心的亮点!</textarea>
<br>
<input type="submit" value="保存" />
<input type="reset" />
<input type="button" value="普通按钮" />
</form>
</body>

</html>

效果展示

一番雾语:大技能就是各类小技能的排列组合,熟练掌握各种小技能才能成就大技能。


免费知识星球:一番码客-积累交流
微信公众号:一番码客
微信:Efon-fighting
网站:http://www.efonmark.com