<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>联动列表</title>
<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333;}
</style>
<script language="javascript">
var $ = function(id){return document.getElementById(id);} //公告ID函数
//window.onload = function(){init();}
window.οnlοad=init;
/*
addr 代表大地区
addrSeconds 代表小地区
*/
///
var addr = new Array("请选择城市","北京市","天津市","河北省");
var addrSeconds = new Array();
addrSeconds.push(["北京","东城区","西城区","崇文区","门头沟区","房山区"]);
//alert(addrSeconds[0][2]);
addrSeconds.push(["和平区","河东区","河西区","南开区","红桥区","塘沽区"]);
addrSeconds.push(["石家庄市","张家口市","承德市","秦皇岛市","唐山市"]);
///
function init(){
$('content').innerHTML = '<select name="addr" id="addr" οnchange="selectArea()"></select> <select name="addrseconds" id="addrseconds"><option>请选择地区</option></select><br />';
for(var i=0; i<addr.length; i++){ //动态加入省
//范佳鹏的写法；
/*
var addrOptions = document.createElement('option'); //动态创建options
addrOptions.text = addr[i];
addrOptions.value = i;
*/
//老师的写法：
var addrOptions =new Option(addr[i],i);
$('addr').options.add(addrOptions); //动态加入option
}
}
///
function selectArea(){
//选择 I 的值 对应 addrSeconds数组里的值
var arrNum = $('addr').options[$('addr').selectedIndex].value-1;
//移处存在的options
//while($('addrseconds').length>0){
//$('addrseconds').remove($('addrseconds').options[0]);
//}
//移除options 老师的方法；
$('addrseconds').options.length=0;
for(var i=0; i<addrSeconds[arrNum].length; i++){ //动态加入省下各地区
var addrOptionSeconds = document.createElement('option'); //动态创建options
addrOptionSeconds.text = addrSeconds[arrNum][i];
addrOptionSeconds.value = addrSeconds[arrNum][i];
$('addrseconds').options.add(addrOptionSeconds); //动态加入option
}
}
</script>
</head>
<body>
<span id="content"></span>
</body>
</html>
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
