js操縱跨frame的三級聯動select下拉選項

　　運用HTMLCSS以及Javascript相關知識編寫多窗口多菜單的內容聯動

考察學生關於frame浏覽器對象以及表單控件的概念javascript事件觸發機制和程序設計
以及用CSS來組織文字展示的掌握程度使學生對DHTML有更加深刻的理解
實驗內容【必做】
（１）建立一個包含三個frame的窗口
（２）第一個frame中包含一個select內容是中國的各個省
（３）第二個frame中同樣含有一個select內容是各省的地級市
（４）第三個frame用來顯示關於某地市的介紹
（５）當在frame的selecet中選擇某個省則frame中的select自動把可選項變為該省下的各地市
（６）當在frame中的select選中某地市後在frame中顯示該地市的介紹
（７）介紹要求用div容納居左對齊藍色字px首行縮進

菜單聯動參考界面效果

提示實現本試驗可以有多種方式（例如css版dom版ajax版prototype版都可以實現）學員只需選擇一種實現方式即可

菜單聯動試驗相關數據
江蘇
南京南京是江蘇省的省會六朝古都歷史遺跡豐富文化底蘊深厚
泰州泰州是千年古郡胡主席出生的地方汪老師的故鄉以三麻出名其中尤以麻將聞名
蘇州 “上有天堂下有蘇杭”蘇州以園林而出名著名的園林有“拙政園”“獅子林”等人傑地靈文人墨客輩出

浙江
杭州杭州是浙江省的省會風景優美人間仙境所謂“上有天堂下有蘇杭”
溫州溫州最出名的就是商人溫州人幾乎人人都經商舉國痛恨的溫州炒房團就是其中的代表！
嘉興對嘉興的了解還是停留在嘉興南湖上舉行的那次歷史性的大會

廣東
廣州廣州是廣東省的省會經濟發達但是犯罪猖獗！
深圳深圳是全國第一個經濟特區經濟發達幾乎全是外來人口跟廣州一樣治安也不好
珠海珠海是我國第一批沿海開放城市之一城市優美典型的海濱城市適合居住

寫了一個shit 味不是太濃的js代碼供各位看官和懶蛋們享用
上代碼
frame_ahtm: 顯示省份province的下拉列表

代碼如下:
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=GBK">
</script>
</head>
<body >
<h>Frame A</h>
<form name="form" method="post">
<SELECT ID="s" NAME="s" >
<OPTION selected></OPTION>
</SELECT>
</form>
</body>
</html>

　　
frame_bhtm: 顯示某個身份的所有的城市city的下拉列表

代碼如下:
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=GBK">
</head>
<body>
<h>Frame B</h>
<form name="form" method="post">
<SELECT ID="s" NAME="s" >
<OPTION selected></OPTION>
</SELECT>
</form>
</body>
</html>

　　
frame_chtm:顯示對應的city的描述description

復制代碼代碼如下:
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=GBK">
</head>
<body>
<h>Frame C</h>
<div id="description"></div>
</body>
</html

　　
indexhtm: 全局框架總控頁面

代碼如下:
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=GBK">
<script language="javascript" type="text/javascript">
var provinces = new Array();
provinces[] = "江蘇";
provinces[] = "浙江";
provinces[] = "廣東";
var cities = new Array();
cities[] = new Array();
cities[][] = "南京";
cities[][] = "泰州";
cities[][] = "蘇州";
cities[] = new Array();
cities[][] = "杭州";
cities[][] = "溫州";
cities[][] = "嘉興";
cities[] = new Array();
cities[][] = "廣州";
cities[][] = "深圳";
cities[][] = "珠海";
var descriptions = new Array();
descriptions[] = new Array();
descriptions[][] = "南京是江蘇省的省會六朝古都歷史遺跡豐富文化底蘊深厚";
descriptions[][] = "泰州是千年古郡胡主席出生的地方汪老師的故鄉以三麻出名其中尤以麻將聞名";
descriptions[][] = "上有天堂下有蘇杭蘇州以園林而出名著名的園林有“拙政園”“獅子林”等人傑地靈文人墨客輩出";
descriptions[] = new Array();
descriptions[][] = "杭州是浙江省的省會風景優美人間仙境所謂“上有天堂下有蘇杭”";
descriptions[][] = "溫州最出名的就是商人溫州人幾乎人人都經商舉國痛恨的溫州炒房團就是其中的代表！";
descriptions[][] = "對嘉興的了解還是停留在嘉興南湖上舉行的那次歷史性的大會";
descriptions[] = new Array();
descriptions[][] = "廣州是廣東省的省會經濟發達但是犯罪猖獗！";
descriptions[][] = "深圳是全國第一個經濟特區經濟發達幾乎全是外來人口跟廣州一樣治安也不好";
descriptions[][] = "珠海是我國第一批沿海開放城市之一城市優美典型的海濱城市適合居住";

var current_province;
var current_city;
function setCity(province city)
{
// alert("city");
//frame_b
var obj = windowframesframe_bdocumentgetElementById("s");
var length = cities[province]length;
for(i = ; i < length; ++i) {
obj[i] = new Option(cities[province][i]);
obj[i]selected = "false";
}
obj[city]selected = true;
current_city = city;
setCityDescription(province city);
}
function setCityDescription(province city)
{
// alert("description");
//frame_c
var obj = windowframesframe_cdocumentgetElementById("description");
objinnerHTML = descriptions[province][city];

}

function setProvince(province)
{
// alert("province");
// var obj = windowframesframe_adocumentgetElementById("s");
// var obj = windowframes["frame_a"]documentgetElementById("s");
//var obj = windowframes[]documentgetElementById("s");
// var obj = windowframes["frame_a"]; //documentgetElementById("s");
// obj = objdocumentgetElementById("s");
var obj = windowframes["frame_a"]documentgetElementById("s"); //由於chrome對跨域訪問的檢查在本地無法顯示在上傳到服務器上顯示無誤
var length = provinceslength;
for(i = ; i < length; ++i) {
obj[i] = new Option(provinces[i]);
obj[i]selected = "false";
}
obj[province]selected = "true";
current_province = province;
var city = ;
setCity(province city);
//setCityDescription(province city);
}

function init(province city)
{
setProvince(province);
setCity(province city);
setCityDescription(province city);
var obj = windowframesframe_adocumentgetElementById("s");
objonchange = Function("setProvince(thisselectedIndex)");
// alert(objselectedIndex);

var obj = windowframesframe_bdocumentgetElementById("s");
objonchange = Function("setCity(current_province thisselectedIndex)");
// alert(objselectedIndex);
}
</script>
</head>
<frameset cols="%%" onload="init( );">
<frame src="frame_ahtm" name="frame_a">
<frameset rows="%%">
<frame src="frame_bhtm" name="frame_b">
<frame src="frame_chtm" name="frame_c">
</frameset>
</frameset>
</html>

　　
後記
）靈活性 function init(province city) 在頁面onload時可以指定初始顯示的城市競價排名
）可擴展性可以通過增加數組中的數據源來增加對更多城市的支持數據源可以通過xml文件或者ajax方式實現動態的數據源利用dom操作實現
）跨域問題由於chrome對frame進行跨域檢查所以在本地不經過設置頁面無法顯示不過上傳到服務器上可以沒有問題

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20097.html