首页
IT
登录
6mi
u
盘
搜
搜 索
IT
Dom操作实现二级联动下拉选择省份
Dom操作实现二级联动下拉选择省份
xiaoxiao
2021-04-18
56
<!DOCTYPE
HTML
>
<html>
<head>
<title>
二级联动列表
</title>
<meta
charset=
"utf-8"
/>
<style>
.
hide
{
display
: none
;
}
</style>
<script>
/*实现“省”和“市”的级联下拉列表*/
var
cities=[[]
,
/*0号下标没有元素*/
[{
"name"
:
'东城区'
,
"value"
:
101
}
,
{
"name"
:
'西城区'
,
"value"
:
102
}
,
{
"name"
:
'海淀区'
,
"value"
:
103
}
,
{
"name"
:
'朝阳区'
,
"value"
:
104
}]
,
[{
"name"
:
'河东区'
,
"value"
:
201
}
,
{
"name"
:
'河西区'
,
"value"
:
202
}
,
{
"name"
:
'南开区'
,
"value"
:
303
}]
,
[{
"name"
:
'石家庄市'
,
"value"
:
301
}
,
{
"name"
:
'廊坊市'
,
"value"
:
302
}
,
{
"name"
:
'保定市'
,
"value"
:
303
}
,
{
"name"
:
'唐山市'
,
"value"
:
304
}
,
{
"name"
:
'秦皇岛市'
,
"value"
:
305
}] ]
;
function
loadCities
(i){
var
selection=
document
.
querySelector
(
"[name='cities']"
)
;
selection.
className
=
'hide'
if
(i!=
0
){
//设置节点片段来存储新增的option节点
var
frag=
document
.
createDocumentFragment
()
;
//首先清空cities下的option以及设置其的className="hide"
selection.
innerHTML
=
""
;
//遍历cities[i]数组对象
for
(
var
n=
0
;
n<cities[i].
length
;
n++){
//创建option来存储遍历的对象的name和value
var
option=
document
.
createElement
(
"option"
)
;
option.
innerHTML
=cities[i][n].
name
;
option.
value
=cities[i][n].
value
;
// 将创建的option存储到节点片段中
frag.
appendChild
(option) }
//遍历完了之后将节点片段追加到cities下
selection.
appendChild
(frag)
;
//将cities下拉列表的class属性只换成show，让其显示出来
selection.
className
=
''
} }
</script>
</head>
<body>
<select
name=
"provs"
οnchange=
"
loadCities
(
this
.
selectedIndex
)
"
>
<option>
—请选择—
</option>
<option>
北京市
</option>
<option>
天津市
</option>
<option>
河北省
</option>
</select>
<select
name=
"cities"
class=
"hide"
></select>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-675190.html
技术
最新回复
(
0
)
