1.1 案例六：使用JS完成省市联动的效果：
1.1.1 需求：
1.1.2 分析：
1.1.2.1 技术分析:
1.1.4.2 JS的全局函数：
在注册页面上有两个下拉列表,左侧省份的下拉列表一改变,右侧的市的下拉列表也要跟着发生变化.
【JS中创建数组】
【JS的事件】
下拉的列表的改变的事件.onchange.
【JS的DOM的操作】
创建元素：
添加元素：
1.1.2.2 步骤分析
【步骤一】创建一个HTML文件.
【步骤二】确定事件：onchange事件.
【步骤三】触发函数,在函数中编写代码.
【步骤四】获得到所选择的省份的信息.
【步骤五】根据选择的省份的信息获得到对应的数组中的市的数据.
【步骤六】遍历数组中的市的信息.
【步骤七】创建元素，创建文本,最后将元素添加到第二个列表中.
1.1.3 代码实现:
|
|
/
/
定义数组：二维数组：
var arrs
=
new
Array
(
5
)
;
arrs[
0
]
=
new
Array
(
"杭州市"
,
"绍兴市"
,
"温州市"
,
"义乌市"
,
"嘉兴市"
)
;
arrs[
1
]
=
new
Array
(
"南京市"
,
"苏州市"
,
"扬州市"
,
"无锡市"
)
;
arrs[
2
]
=
new
Array
(
"武汉市"
,
"襄阳市"
,
"荆州市"
,
"宜昌市"
,
"恩施"
)
;
arrs[
3
]
=
new
Array
(
"石家庄市"
,
"唐山市"
,
"保定市"
,
"邢台市"
,
"廊坊市"
)
;
arrs[
4
]
=
new
Array
(
"长春市"
,
"吉林市"
,
"四平市"
,
"延边市"
)
;
function changeCity
(
value
)
{
/
/
获得到选中的省份的信息.
var
city
=
document
.getElementById
(
"city"
)
;
/
/
清除第二个列表中的内容
:
for
(
var i
=
city
.options.length;i
>
0
;i
--){
city
.options[i]
=
null;
}
/
/
city
.options.length
=
0
;
/
/
alert
(
value
)
;
for
(
var i
=
0
;i
<
arrs.length;i
+
+
)
{
if
(
value
=
=
i
)
{
/
/
获得所有的市的信息.
for
(
var j
=
0
;j
<
arrs[i].length;j
+
+
)
{
/
/
alert
(
arrs[i][j]
)
;
/
/
创建元素：
var opEl
=
document
.createElement
(
"option"
)
;
/
/
<
option
>
<
/
option
>
/
/
创建文本节点
:
var textNode
=
document
.createTextNode
(
arrs[i][j]
)
;
/
/
将文本的内容添加到option元素中.
opEl.appendChild
(
textNode
)
;
/
/
将option的元素添加到第二个列表中.
city
.appendChild
(
opEl
)
;
}
}
}
}
1.1
.
4
总结：
1.1
.
4.1
JS的内置对象
:
[
/
i][
/
i][
/
i][
/
i][attach]
227068
[
/
attach][i][i][i][i]
Ø Array
:
[
/
i][
/
i][
/
i][
/
i][attach]
227069
[
/
attach][i][i][i][i]
Ø Boolean
:
[
/
i][
/
i][
/
i][
/
i][attach]
227070
[
/
attach][i][i][i][i]
Ø Date
:
[
/
i][
/
i][
/
i][
/
i][attach]
227071
[
/
attach][i][i][i][i]
*
[
url
=
http
:
/
/
www.baidu.com?time
=
new
]http
:
/
/
www.baidu.com?time
=
new
[
/
url
] Date
(
)
.getTime
(
)
;
Ø Math对象
:
|
|
|
Ø String对象
:
*
charAt
(
)
;
*
indexOf
(
)
;
*
lastIndexOf
(
)
;
*
split
(
)
;
*
replace
(
)
;
*
substring
(
)
;
*
substr
(
)
;
|
|
|
*
parseInt
(
)
;
*
parseInt
(
“
11
”
)
;
*
parseFloat
(
)
;
*
parseFloat
(
“
32.0
9
”
)
;
*
编码和解码的方法：
/
/
解码
*
decodeURI
(
)
;
*
decodeURIComponent
(
)
;
/
/
编码
*
encodeURI
(
)
;
*
encodeURIComponent
(
)
;
eval函数：
*
将一段内容当成是JS的代码执行.
/
/
var sss
=
“alert
(
‘aaaa’
)
”;
/
/
eval
(
sss
)
;
|