1.確定數據格式:
首先，讓我們介紹創建選項的語法:
代碼:
-
var newOption =新選項（optionText，Option value）；
-
根據上面的語法，我們知道select選項分為optionText和optionvalue。optionText是我們在下拉框中看到的選項，optionvalue是提交的實際值。例如，我們在壹個選項中看到“北京”，但實際提交的值是“010”。
為了保持壹致，我們確定選項的格式為:
代碼:
-
{txt:“選項名稱“，val:“選項值“}
-
那麽選項組是:
代碼:
-
var child arr =【】；
ChildArr【‘父選項值1‘】=【
{txt:“選項名稱1“，val:“選項值1“}，
{txt:“選項名稱2“，val:“選項值2“}，
{txt:“選項名稱3“，val:“選項值3“}，
...
{txt:“選項名稱n“，val:“選項值n“}
]
ChildArr【‘父選項值2‘】=【
{txt:“選項名稱1“，val:“選項值1“}，
{txt:“選項名稱2“，val:“選項值2“}，
{txt:“選項名稱3“，val:“選項值3“}，
...
{txt:“選項名稱n“，val:“選項值n“}
]
-
其中“父選項值”是在父下拉列表中選擇的值。
註意:【】和{}中的值由“，”（逗號）分隔，但最後壹個值不能跟“，”（逗號），否則語法會出錯，PHP程序員要特別註意！！！
2.根據傳入的數組創建選項列表:
代碼:
-
for(var I = 0；我& ltleni++)
{
select obj . options【I】=新選項（Option list【I】）。選項列表【I】。val）；
}
-
3.在設置選項之前，我們需要清除原始選項:
代碼:
-
函數移除選項（selectObj）
{
if（type of select obj！=‘對象’）
{
select obj = document . getelementbyid（select obj）；
}
//原始選項計數
var len = select obj . options . length；
for(var I = 0；我& ltleni++)
{
//刪除當前選項
select obj . options【0】= null；
}
}
-
請註意，我們在這裏使用select obj . options【I】而不是select obj . options【0】，因為刪除選項【0】後，將添加以下選項，因此我們只需要選擇select obj . options【0】= null。
4.設置提示選項和默認選項:
通常我們會在下拉列表中設置壹個提示選項，比如“請選擇壹個城市”。該選項的值為空，僅提示用戶執行選擇操作。
此外，下拉列表還需要能夠設置默認選項，即當頁面加載時，設置選中的項目。
完整的代碼如下:
-
JS代碼:
-
& lt腳本語言=“JavaScript“type =“text/JavaScript“& gt；
& lt！-
/*
*說明:清除指定下拉列表的選項值。
*作者:CodeBit.cn（）
*
* @ param { string | | object】} select obj目標下拉框的名稱或對象必須是
*/
函數移除選項（select obj ）{
if（type of select obj！=‘object’）{
select obj = document . getelementbyid（select obj）；
}
//原始選項計數
var len = select obj . options . length；
for(var I = 0；我& ltleni++) {
//刪除當前選項
select obj . options【0】= null；
}
}
/*
*說明:將傳入的選項值設置為指定的下拉列表。
*作者:CodeBit.cn（）
*
* @ param { string | | object】} select obj目標下拉框的名稱或對象必須是
* @param {Array} optionList值設置格式:【{ txt:‘Beijing‘，val:‘010‘}，{ txt:‘Shanghai‘，val:‘020‘}】，必須為。
* @param {String} firstOption值，如“請選擇”；可選；該值為空。
* @param {String}選定的默認選定值，可選。
*/
函數集selectoption（select obj，optionList，firstOption，selected ）{
if（type of select obj！=‘object’）{
select obj = document . getelementbyid（select obj）；
}
//清除選項
remove options（select obj）；
//選項計數
var start = 0；
//如果需要添加第壹個選項。
if（第壹選項）{
select obj . options【0】= new Option（first Option，“）；
//選項計數從1開始。
start++；
}
var len = optionList.length
for(var I = 0；我& ltleni++) {
//設置選項
select obj . options【start】=新選項（Option list【I】）。選項列表【I】。val）；
//選定的項目
if（selected = = option list【I】。val）
選擇對象選項【開始】。selected = true
}
//計數加1
start++；
}
}
//--& gt；
& lt/script & gt；
-
HTML代碼:
-
& lt腳本語言=“JavaScript“type =“text/JavaScript“& gt；
var city arr =【】；
city arr【‘江蘇省‘】=【
{txt:“南京”，val:“南京”}，
{txt:“無錫”，val:“無錫”}，
{txt:“徐州”，val:“徐州”}，
{txt:“蘇州”，val:“蘇州”}，
{txt:“南通”，val:“南通”}，
{txt:“淮陰”，val:“淮陰”}，
{txt:“揚州”和val:“揚州”}，
{txt:“鎮江”和val:“鎮江”}，
{txt:“常州”，val:“常州”}
];
city arr【‘浙江省‘】=【
{txt:“杭州”和val:“杭州”}，
{txt:“寧波”和val:“寧波”}，
{txt:“溫州”和val:“溫州”}，
{txt:“湖州”，val:“湖州”}
];
功能設置城市（省）{
setselectoption（‘city‘，cityarr【省】，‘-請選擇-‘）；
}
& lt/script & gt；
& ltselect name =“province“id =“province“onchange =“if（this . value！=‘‘‘）set city（this . options【this . selectedindex】。值）；& gt
& lt選項值=““& gt；-請選擇-
& lt選項值=“江蘇省“》江蘇省
& lt選項值=“浙江省“》浙江省
& lt/select & gt；省
& ltselect name =“city“id =“city“& gt；
& lt選項值=““& gt；-請選擇-
& lt/select & gt；城市