Posted on 2007-10-23 09:34
草 鞋 閱讀(190)
評論(0) 編輯 收藏 所屬分類:
JavaScript
<!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=gb2312">
<title>二級級聯</title>
<style type="text/css">
<!--
body {
font-size: 12px;
background-color: #CCCCCC;
}
select {
background-color: #CCCCCC;
text-align: left;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
/*
[select]二級級聯
版權歸 海娃@www.51windows.Net所有
Abo Blog修改少數部分
*/
//定義分隔符，用于分割[select]變量
var TheSplit1 = "*" //一級選項與一級選項之間的分隔符
var TheSplit2 = "|" //一級選項與二級選項之間的分隔符
var TheSplit3 = "^" //二級選項與二級選項之間的分隔符
var TheSplit4 = "@" //選項文本與選項值的分隔符，可以省略[值為選項文本值]
/*
定義[select]框選項變量,這里以省市二級為例
例：一級選項一|二級選項一^二級選項二^二級選項三*一級選項二|*二級選項三|
*香港|*澳門
注:當一級選項沒有二級下屬時，請在后面加上TheSplit2分隔符，否帽關聯將會出錯，所以應該注意防止此類錯誤發生
如果選項文本與選項值不同時，請在選項文本后加上@值格式:[Text@Value]
如:北京@010|東城@0101^西城@0102
*/
var hwallselecttext = "北京|東城^西城^崇文^宣武^朝陽^豐臺^石景山^海淀^門頭溝^房山^通州^順義^昌平^大興^平谷^懷柔^密云^延慶*上海|黃浦^盧灣^徐匯^長寧^靜安^普陀^閘北^虹口^楊浦^閔行^寶山^嘉定^浦東^金山^松江^青浦^南匯^奉賢^崇明*天津|和平^東麗^河東^西青^河西^津南^南開^北辰^河北^武清^紅撟^塘沽^漢沽^大港^寧河^靜海^寶坻^薊縣*重慶|萬州^涪陵^渝中^大渡口^江北^沙坪壩^九龍坡^南岸^北碚^萬盛^雙撟^渝北^巴南^黔江^長壽^綦江^潼南^銅梁^大足^榮昌^壁山^梁平^城口^豐都^墊江^武隆^忠縣^開縣^云陽^奉節^巫山^巫溪^石柱^秀山^酉陽^彭水^江津^合川^永川^南川*河北|石家莊^邯鄲^邢臺^保定^張家口^承德^廊坊^唐山^秦皇島^滄州^衡水*山西|太原^大同^陽泉^長治^晉城^朔州^呂梁^忻州^晉中^臨汾^運城*內蒙古|呼和浩特^包頭^烏海^赤峰^呼倫貝爾盟^阿拉善盟^哲里木盟^興安盟^烏蘭察布盟^錫林郭勒盟^巴彥淖爾盟^伊克昭盟*遼寧|沈陽^大連^鞍山^撫順^本溪^丹東^錦州^營口^阜新^遼陽^盤錦^鐵嶺^朝陽^葫蘆島*吉林|長春^吉林^四平^遼源^通化^白山^松原^白城^延邊*黑龍江|哈爾濱^齊齊哈爾^牡丹江^佳木斯^大慶^綏化^鶴崗^雞西^黑河^雙鴨山^伊春^七臺河^大興安嶺*江蘇|南京^鎮江^蘇州^南通^揚州^鹽城^徐州^連云港^常州^無錫^宿遷^泰州^淮安*浙江|杭州^寧波^溫州^嘉興^湖州^紹興^金華^衢州^舟山^臺州^麗水*安徽|合肥^蕪湖^蚌埠^馬鞍山^淮北^銅陵^安慶^黃山^滁州^宿州^池州^淮南^巢湖^阜陽^六安^宣城^亳州*福建|福州^廈門^莆田^三明^泉州^漳州^南平^龍巖^寧德*江西|南昌市^景德鎮^九江^鷹潭^萍鄉^新馀^贛州^吉安^宜春^撫州^上饒*山東|濟南^青島^淄博^棗莊^東營^煙臺^濰坊^濟寧^泰安^威海^日照^萊蕪^臨沂^德州^聊城^濱州^菏澤*河南|鄭州^開封^洛陽^平頂山^安陽^鶴壁^新鄉^焦作^濮陽^許昌^漯河^三門峽^南陽^商丘^信陽^周口^駐馬店^濟源*湖北|武漢^宜昌^荊州^襄樊^黃石^荊門^黃岡^十堰^恩施^潛江^天門^仙桃^隨州^咸寧^孝感^鄂州*湖南|長沙^常德^株洲^湘潭^衡陽^岳陽^邵陽^益陽^婁底^懷化^郴州^永州^湘西^張家界*廣東|廣州^深圳^珠海^汕頭^東莞^中山^佛山^韶關^江門^湛江^茂名^肇慶^惠州^梅州^汕尾^河源^陽江^清遠^潮州^揭陽^云浮*廣西|南寧^柳州^桂林^梧州^北海^防城港^欽州^貴港^玉林^南寧地區^柳州地區^賀州^百色^河池*海南|海口^三亞*四川|成都^綿陽^德陽^自貢^攀枝花^廣元^內江^樂山^南充^宜賓^廣安^達川^雅安^眉山^甘孜^涼山^瀘州*貴州|貴陽^六盤水^遵義^安順^銅仁^黔西南^畢節^黔東南^黔南*云南|昆明^大理^曲靖^玉溪^昭通^楚雄^紅河^文山^思茅^西雙版納^保山^德宏^麗江^怒江^迪慶^臨滄*西藏|拉薩^日喀則^山南^林芝^昌都^阿里^那曲*陜西|西安^寶雞^咸陽^銅川^渭南^延安^榆林^漢中^安康^商洛*甘肅|蘭州^嘉峪關^金昌^白銀^天水^酒泉^張掖^武威^定西^隴南^平涼^慶陽^臨夏^甘南*寧夏|銀川^石嘴山^吳忠^固原*青海|西寧^海東^海南^海北^黃南^玉樹^果洛^海西*新疆|烏魯木齊^石河子^克拉瑪依^伊犁^巴音郭勒^昌吉^克孜勒蘇柯爾克孜^博爾塔拉^吐魯番^哈密^喀什^和田^阿克蘇*香港|*澳門|*臺灣|臺北^高雄^臺中^臺南^屏東^南投^云林^新竹^彰化^苗栗^嘉義^花蓮^桃園^宜蘭^基隆^臺東^金門^馬祖^澎湖*其它|北美洲^南美洲^亞洲^非洲^歐洲^大洋洲"
//默認值，當選項值有相同時有bug。
var hwdefault_value ="福建福州"
var hwallselecttextarr
hwallselecttextarr = hwallselecttext.split(TheSplit1)
hwArraylength = hwallselecttextarr.length
var hwwhere = new Array(hwArraylength);
hwwhere[0]= new hw_comefrom("請選擇@","請選擇@");
for (var hwl=0;hwl<hwArraylength;hwl++)
{
eval(hwwhere[hwl+1] = new hw_comefrom(hwallselecttextarr[hwl].split(TheSplit2)[0],hwallselecttextarr[hwl].split(TheSplit2)[1]))
}
function hw_comefrom(hwSelect_s1,hwSelect_s2)
{
this.hwSelect_s1 = hwSelect_s1;
this.hwSelect_s2 = hwSelect_s2;
}
function hw_select(boss,underling)
{
with(document.getElementsByName(boss)[0])
{
var hwSelect_s12 = options[selectedIndex].value;
}
for(hwi = 0;hwi < hwwhere.length;hwi ++)
{
if (hwwhere[hwi].hwSelect_s1.indexOf(TheSplit4)!=-1)
{
var hwThisV = hwwhere[hwi].hwSelect_s1.split(TheSplit4)[1]
}
else
{
var hwThisV = hwwhere[hwi].hwSelect_s1
}
if (hwThisV == hwSelect_s12)
{
hwSelect_s13 = (hwwhere[hwi].hwSelect_s2).split(TheSplit3);
for(hwj = 0;hwj < hwSelect_s13.length;hwj++)
{
with(document.getElementsByName(underling)[0])
{
length = hwSelect_s13.length;
if (hwSelect_s13[hwj].indexOf(TheSplit4)!=-1)
{
options[hwj].text = hwSelect_s13[hwj].split(TheSplit4)[0]
options[hwj].value = hwSelect_s13[hwj].split(TheSplit4)[1]
}
else
{
options[hwj].text = hwSelect_s13[hwj];
options[hwj].value = hwSelect_s13[hwj];
}
var hwSelect_s14=options[selectedIndex].value;
}
}
break;
}
}
}
function hw_init(boss,underling)
{
with(document.getElementsByName(boss)[0])
{
length = hwwhere.length;
var hwm = 0
for(hwk=0;hwk<hwwhere.length;hwk++)
{
if (hwwhere[hwk].hwSelect_s1.indexOf(TheSplit4)!=-1)
{
options[hwk].text = hwwhere[hwk].hwSelect_s1.split(TheSplit4)[0];
options[hwk].value = hwwhere[hwk].hwSelect_s1.split(TheSplit4)[1];
if (hwdefault_value.indexOf(hwwhere[hwk].hwSelect_s1.split(TheSplit4)[1])!=-1){hwm = hwk}
}
else
{
options[hwk].text = hwwhere[hwk].hwSelect_s1;
options[hwk].value = hwwhere[hwk].hwSelect_s1;
if (hwdefault_value.indexOf(hwwhere[hwk].hwSelect_s1)!=-1){hwm = hwk}
}
}
selectedIndex = hwm
}
with(document.getElementsByName(underling)[0])
{
var hwn = 0
hwSelect_s13 = (hwwhere[hwm].hwSelect_s2).split(TheSplit3);
length = hwSelect_s13.length;
for(hwl=0;hwl<length;hwl++)
{
if (hwSelect_s13[hwl].indexOf(TheSplit4)!=-1)
{
options[hwl].text = hwSelect_s13[hwl].split(TheSplit4)[0];
options[hwl].value = hwSelect_s13[hwl].split(TheSplit4)[1];
if (hwdefault_value.indexOf(hwSelect_s13[hwl].split(TheSplit4)[1])!=-1){hwn = hwl}
}
else
{
options[hwl].text = hwSelect_s13[hwl];
options[hwl].value = hwSelect_s13[hwl];
if (hwdefault_value.indexOf(hwSelect_s13[hwl])!=-1){hwn = hwl}
}
}
selectedIndex = hwn
}
}
-->
</script>
</head>
<body>
<form name="form1" method="post" action="">
請選擇省份：
<select name="select_p" onChange = "hw_select('select_p','select_c')">
</select>
<br>
請選擇城市：
<select name="select_c" onChange = "hw_select('select_p','select_c')">
</select>
<br>
<br>
<strong>注</strong>：選擇框必須加入onChange事件<br>
<select name="select_p" onChange = "hw_select('boss','underling')"></select><br>
boss：一級[這里即“省份”]的name標簽，標簽名可以不唯一，但是必須在頁面上第一個出現
<br>
underling：二級[這里即“城市”]的name標簽,標簽名可以不唯一，但是必須在頁面上第一個出現
</form>
<script language="JavaScript" type="text/JavaScript">
<!--
//初始化
hw_init("select_p","select_c");
-->
</script>
</body>
</html>