<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>select组件的演示</title>
<script type="text/javascript">
function selectCtiy(){
var citys=[['选择城市'],
['海淀区','东城区','西城区','朝阳区'],
['益阳','长沙','株洲','湘潭'],
['杭州','宁波','金华','温州'],
['南昌','九江','萍乡','上饶']];
var nameseild=document.getElementById("seild");
var seildsubnm=document.getElementById("subseild");
var index=nameseild.selectedIndex;
var city=citys[index];
/* 方法一：*/
for(var xs=1;xs<seildsubnm.options.length;){/*这里是每次删除一个options数组 */
seildsubnm.removeChild(seildsubnm.options[xs]);
}
/* 发二： 设置右边那个select组件的长度只有一个*/
//seildsubnm.length=1;/* 这个地方是设置右边那个select组件的长度只有一个，轻松的清除前面的所有节点；*/
for(var i=0;i<city.length;i++){
var optionNode=document.createElement("option");/* 这个地方是制造一个新元素 */
optionNode.innerHTML=city[i];
seildsubnm.appendChild(optionNode);/*将新元素贴加到select组件上 */
}
}
/*这个地方的方法是采用了map集合的方式 */
function select2(){
var colctiys={ "defalut":['选择城市'],
"beijin":['海淀区','东城区','西城区','朝阳区'],
"hunan":['益阳','长沙','株洲','湘潭'],
"zhejiang":['杭州','宁波','金华','温州'],
"jiangxi":['南昌','九江','萍乡','上饶']
};
var oseildNode=document.getElementById("seild2");
var oseildNode2=document.getElementById("subseild2");
var index=oseildNode.selectedIndex;
var optionNode=oseildNode.options[index];
var keys=optionNode.value;
var cties=colctiys[""+keys];
oseildNode2.length=1;
for(var i=0;i<cties.length;i++){
var optionsd=document.createElement("option");
optionsd.innerHTML=cties[i];
oseildNode2.appendChild(optionsd);
}
}
</script>
</head>
<body>
<select id="seild" onchange="selectCtiy()">
<option>请选择省份</option>
<option>北京</option>
<option>湖南</option>
<option>浙江</option>
<option>江西</option>
</select>
<select id="subseild">
<option>请选择城市</option>
</select>
<!-- 这个地方的区别在于option里面也必须设置value值 -->
<select id="seild2" onchange="select2()"><!-- 这个地方出错了一次是因为上面的function函数少写了个{,但只在这一行报错。 -->
<option value="defalut">请选择省份</option>
<option value="beijin">北京</option>
<option value="hunan">湖南</option>
<option value="zhejiang">浙江</option>
<option value="jiangxi">江西</option>
</select>
<select id="subseild2">
<option>请选择城市</option>
</select>
</body>
</html>