- <!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>JS 特效 - 省市级联 </title>
- <script>
- // 定义省级数组
- var pArray=new Array("北京","上海","天津","山东");
- // 定义市级数组
- var cArray=new Array();
- cArray[0]=new Array("东城","西城","从文","宣武","朝阳","丰台");
- cArray[1]=new Array("黄埔","鹿王","长宁","静安","普陀","虹口");
- cArray[2]=new Array("北辰","南开","河西","河东","东丽","和平");
- cArray[3]=new Array("济南","青岛","烟台","潍坊","济宁","泰安");
- // 初始化
- function init(){
- var province=document.getElementById("province");
- for(var i=0;i<pArray.length;i++){
- var option=document.createElement("option");
- option.value=pArray[i];
- option.text=pArray[i];
- province.options.add(option);
- }
- }
- function show(){
- var province=document.getElementById("province");
- var city=document.getElementById("city");
- var pSelectedIndex=province.selectedIndex-1;
- var result=document.getElementById("result");
- if(pSelectedIndex<0){
- result.innerText="";
- }
- else{
- result.innerText=pArray[pSelectedIndex];
- var cSelectedIndex=city.selectedIndex-1;
- if(cSelectedIndex>=0){
- result.innerText+=","+cArray[pSelectedIndex][cSelectedIndex];
- }
- }
- }
- function selectProvince(){
- var province=document.getElementById("province");
- var city=document.getElementById("city");
- var pSelectedIndex=province.selectedIndex-1;
- for(var i=city.options.length-1;i>0;i--){
- city.options.remove(i);
- }
- if(pSelectedIndex>=0){
- for(var i=0;i<cArray[pSelectedIndex].length;i++){
- var option=document.createElement("option");
- option.value=cArray[pSelectedIndex][i];
- option.text=cArray[pSelectedIndex][i];
- city.options.add(option);
- }
- }
- show();
- }
- </script>
- </head>
- <body onLoad="init()" style="font-size:12px;">
- <form>
省份:<select id="province" onChange="selectProvince()">
- <option value="">
- 请选择省份
- </option>
- </select>
- <br>
城市:<select id="city" onChange="show()">
- <option value="">
- 请选择城市
- </option>
- </select>
- <br>
- <br>
你的选择结果是:<span id="result" style="color:red;"></span></form>
</body>
</HTML>
来源: http://www.bubuko.com/infodetail-3064063.html