您的位置：首页 > Web前端 > JavaScript

级联操作

2016-06-04 16:27 211 查看

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>级联操作</title>

<style type="text/css">

#selectCity{

height: 30px;

width: 140px;

}

#selectArea{

height: 30px;

width: 140px;

}

</style>

<script>

function $$(id){//获得ID的方法

return document.getElementById(id);

}

var selectDefault="";//定义一个空值

window.onload=function(){

selectDefault = $$("selectArea").children[0]//找到第一个元素

}

function changeCity(obj){

var selectValue = obj.value;//得到选择的值

//清理之前的所有下拉地区的数据

$$("selectArea").options.length = 0;

switch (selectValue){

case "1":

$$("selectArea").appendChild(selectDefault);

break;

case "2":

//成都有那些地区

var chengdu = new Array("武侯区","青羊区","金牛区","成华区");//在JS中定义数组

for(var i = 0;i<chengdu.length;i++){

var getArea = chengdu[i];//赋值

var createElement = document.createElement("option");

createElement.innerText = getArea;

$$("selectArea").appendChild(createElement);

}

break;

case "3":

//成都有那些地区

var chongqing = new Array("渝中区","渝北区","沙坪区","巴南区");//在JS中定义数组

for(var i = 0;i<chongqing.length;i++){

var getArea = chongqing[i];

var createElement = document.createElement("option");

createElement.innerText = getArea;

$$("selectArea").appendChild(createElement);

}

break;

default :

break;

}

}

</script>

</head>

<body>

<form name="form1" action="级联操作.html">

请选择城市:<select name="selectCity" id="selectCity" onchange="changeCity(this)">

<option value="1">--请选择所在城市--</option>

<option value="2">成都</option>

<option value="3">重庆</option>

</select>

请选择地区:<select name="selectArea" id="selectArea">

<option value="1">--请选择所在地区--</option>

</select>

</form>

</body>
</html>

选择城市后为自动出现城市有那些地区。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript dom

相关文章推荐

新的分享

章节导航