用JavaScript製作關聯下拉選擇框

在web
頁面上，我們經常會看到幾個相互關聯的下拉式功能表選擇框。當訪問者選擇第一個下拉選擇框中的一個選項後，第二個下拉選擇框中的內容就會隨之發生變化。對於
web開發人員來說，這種情況常常會發生。比如，我們要選擇一個地區名稱，那麼首先要選擇省份名稱，然後再根據省份名稱選擇其中的城市名稱：

　　下面就介紹如何使用JavaScript指令碼實現上述功能。

實現原理

　　上面的功能，實際上就是要實現動態產生頁面內容的工作。這需要Internet Explorer
4.0版本和動態HTML技術的支援。首先建立一個空的SELECT列表，然後再根據需要，使用合適的OPTION元素填充它。為了避免輸入過多的冗餘代
碼，可以分配給選項相應的標識和數值，然後，就可以引用它來完成填充工作。

相關代碼

注意，DHTML代碼僅僅適用於Internet Explorer 4.0或者以上版本，所以，如果要考慮更多的使用者端瀏覽器類型，請添加另外的判別代碼，從而引導使用者到其他的頁面。

< HTML >

< HEAD >

< SCRIPT LANGUAGE="JavaScript" >

function setcity() {

switch (document.shengshi.sheng.value) {

case '河北' :

var labels = new Array("石家莊","滄州","唐山");

var values = new Array("sjz","cz","ts");

break;

case '山東' :

var labels = new Array("濟南","青島","煙台");

var values = new Array("jn","qd","yt");

break

}

// 清空市列表選擇框的內容

document.shengshi.city.options.length = 0;

// 從數組中新增內容

for(var i = 0; i < labels.length; i++) {

document.shengshi.city.add(document.createElement("OPTION"));

document.shengshi.city.options[i].text=labels[i];

document.shengshi.city.options[i].value=values[i];

}

// 選擇第一個選項

document.shengshi.city.selectedIndex = 0;

}

< /SCRIPT >

< /HEAD >

< BODY >

< FORM NAME="shengshi" >

省:

< SELECT NAME="sheng" OnChange="setcity()" >

< OPTION VALUE="河北" >河北< /OPTION >

< OPTION VALUE="山東" SELECTED >山東< /OPTION >

< /SELECT >

市:

< SELECT NAME="city" >< /SELECT >

< /FORM >

< !-- 執行初始化挑選清單 -- >

< SCRIPT LANGUAGE="JavaScript" >

setcity();

< /SCRIPT >

< /BODY >

< /HTML >