使用不同下拉菜單中的值

Question

我是編碼新手，因此我沒有完全理解這段代碼。
我想要實現的是我想放在多個下拉菜單。

我的代碼的問題是，它只接受來自某些下拉菜單的值。

我的代碼可以幫助用戶根據他們在上一個下拉菜單中選擇的內容選擇地區，國家和州。我使用這個代碼是因爲它與我計劃實現的類似。

我面對的問題是我有大約8個需要使用數據的下拉菜單。有8個地區下降，8個國家下降，8個國家下降。全部在同一頁面。如果我放8個代碼，代碼將停止工作。我究竟做錯了什麼？

有人可以幫我嗎？這是代碼：

<form> 
Region&raquo; <select onchange="set_country(this,country,city_state)" size="1"  name="region"> 
<option value="" selected="selected">SELECT NOTE</option> 
<option value=""></option> 
<script type="text/javascript"> 
setRegions(this); 
</script> 
</select> 
Country&raquo; <select name="country" size="1" disabled="disabled" onchange="set_city_state(this,city_state)"></select> 
City/State&raquo; <select name="city_state" size="1" disabled="disabled" onchange="print_city_state(country,this)"></select> 

<script> 
    //////////////////////////////////////////////////////////////////////////// 
// city_state.js /////////////////////////////////////////////////////////// 
//////////////////////////////////////////////////////////////////////////// 

    var countries = Object(); 

countries['C'] = '|C|Cm|'; 
countries['D'] = '|D|Dm|'; 

//////////////////////////////////////////////////////////////////////////// 

var city_states = Object(); 

//C 
city_states['C'] = '|032010|335553|'; 
city_states['Cm'] = '|335543|'; 
city_states['D'] = '|000232|557775'; 
city_states['Dm'] = '|000231|557765'; 

////////////////// ////////////////// /////////// ////////////////////////////////////////////////// ///////////////

function setRegions() 
{ 
    for (region in countries) 
     document.write('<option value="' + region + '">' + region + '</option>'); 
} 

function set_country(oRegionSel, oCountrySel, oCity_StateSel) 
{ 
    var countryArr; 
    oCountrySel.length = 0; 
    oCity_StateSel.length = 0; 
    var region = oRegionSel.options[oRegionSel.selectedIndex].text; 
    if (countries[region]) 
    { 
     oCountrySel.disabled = false; 
     oCity_StateSel.disabled = true; 
     oCountrySel.options[0] = new Option('SELECT TYPE',''); 
     countryArr = countries[region].split('|'); 
    for (var i = 0; i < countryArr.length; i++) 
     oCountrySel.options[i + 1] = new Option(countryArr[i], countryArr[i]); 
    document.getElementById('txtregion').innerHTML = region; 
    document.getElementById('txtplacename').innerHTML = ''; 
} 
else oCountrySel.disabled = true; 
} 

function set_city_state(oCountrySel, oCity_StateSel) 
{ 
var city_stateArr; 
oCity_StateSel.length = 0; 
var country = oCountrySel.options[oCountrySel.selectedIndex].text; 
if (city_states[country]) 
{ 
    oCity_StateSel.disabled = false; 
    oCity_StateSel.options[0] = new Option('SELECT TAB',''); 
    city_stateArr = city_states[country].split('|'); 
    for (var i = 0; i < city_stateArr.length; i++) 
     oCity_StateSel.options[i+1] = new Option(city_stateArr[i],city_stateArr[i]); 
    document.getElementById('txtplacename').innerHTML = country; 
} 
else oCity_StateSel.disabled = true; 
} 

function print_city_state(oCountrySel, oCity_StateSel) 
{ 
var country = oCountrySel.options[oCountrySel.selectedIndex].text; 
var city_state = oCity_StateSel.options[oCity_StateSel.selectedIndex].text; 
if (city_state && city_states[country].indexOf(city_state) != -1) 
    document.getElementById('txtplacename').innerHTML = city_state + ', ' + country; 
else document.getElementById('txtplacename').innerHTML = country; 
} 

</script> 

請看看在http://jsfiddle.net/HzJ9J/1/ 更新的代碼我沒有粘貼一個javascript代碼在JavaScript部分，因爲我認爲，特定的代碼需要在正確的地方運行。不確定是否必須將其移至javascript部分。

Answer 1

對setRegions(this);的呼叫失敗，因爲'setRegions尚未定義;該功能定義尚未被瀏覽器加載。

我添加了一個ID屬性，你的SELECT：

<select onchange="set_country(this,country,city_state)" size="1" name="region" id="region"> 

，然後關閉SCRIPT標籤之前移動呼叫setRegions到的最後一件事。不能用這個了，所以我加了的document.getElementById：

setRegions(document.getElementById("region")); 

使用document.write是一般一個壞主意，什麼時候setRegions通話移出行的都不行，因爲一定是。人們可以利用完成的innerHTML一樣的東西，所以我改變setRegions是這樣的：

function setRegions(elem) { 
    for (region in countries) 
     elem.innerHTML +='<option value="'+region+'">'+region+'</option>'; 
} 

我也刪除從SELECT空的可選元素。這些更改會使您的代碼正常工作，但可能還有更多事情需要調整。

我應該回答問題，而不是給出建議，但如果您沒有使用Firefox和Firebug調試器，或者Chrome中的類似工具，那麼您的工作就太困難了！

編輯2014年7月21日補充：您的代碼：

<script type="text/javascript"> 
    setRegions(document.getElementById("region1")); 
</script> 

是開始，而對於選擇以「REGION1」的ID結束標記之間，我也有賭的DOM元素在通話時不會存在。但是，如果我將JavaScript移動到文檔的頭部，則該區域至少在Firefox中選擇工作。我不知道爲什麼，並強烈建議您將這些內容移到最後，就像我在示例中所做的那樣，或者將其與onload掛鉤。在開始操作DOM之前，確實必須設置DOM。

然而，當我用我只是建議的修改，用Firebug調試運行你的代碼，它告訴我：TypeError: oCountrySel.options is undefined。

獲取Firebug的副本，在Firefox安裝，或者在Chrome中使用的開發工具，從您自己的服務器環境中運行你的代碼，並期待在控制檯選項卡。它真的會幫助你，而且它確實不難。