<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>js_tag.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
window.οnlοad=function(){
//js數組 來存放 採用的js的原生格式
var provinces=[
{
id:'1',
name:'北京',
city:['海淀區','朝陽區','大興區']
},
{
id:'2',
name:'天津',
city:['北辰區','和平區','虹橋區']
},
{
id:'3',
name:'上海',
city:['上海a','上海B區','上海C區']
},
{
id:'4',
name:'重慶',
city:['AA區','BB區','CC區']
}
];
var domprovinces=document.getElementById("province");
//當頁面已加載 就把省份顯示的操作
for(var i=0;i<provinces.length;i++){
//獲取具體的省份對象
var pro=provinces[i];
//創建option標籤
var option=document.createElement("option");
//爲option標籤添加value屬性
option.setAttribute("value",pro.id);
//創建一個文本節點
var textNode=document.createTextNode(pro.name);
//添加到option節點中
option.appendChild(textNode);//爲創建的元素節點添加子節點
//添加到id=province的select標籤中
domprovinces.appendChild(option);//把創建的元素節點添加到指定的節點中
}
var domcity=document.getElementById("city");
//當省份發生改變的時候，就把響應的市區顯示給客戶
domprovinces.οnchange=function(){
//清楚數據(把上次瀏覽保留的數據清除掉)
domcity.length=1;
//添加
for(var i=0;i<provinces.length;i++){
//獲取具體省份
var dompro=provinces[i];
if(this.value==dompro.id){
var city=dompro.city;
for(var j=0;j<city.length;j++){
var doption=document.createElement("option");
var dtextNode=document.createTextNode(city[j]);
//添加到option中
doption.appendChild(dtextNode);
domcity.appendChild(doption);
}
break;
}else{
continue;
}
}
};
};
</script>
</head>
<body>
<select id="province">
<option value="-1">請選擇省份</option>
</select>
<select id="city">
<option value="-1">請選擇市區</option>
</select>
</body>
</html>