如何爲州和城市創建相關的下拉列表

我正在嘗試爲城市和（相關）州創建相關的下拉菜單。這裏是state.html如何爲州和城市創建相關的下拉列表

<html> 
<head><script type= "text/javascript" src = "countries2.js"></script></head> 
<body> 
Select Country: <select onchange="print_state('state',this.selectedIndex);" id="country" name ="country"></select> 
      <br /> 
      City/District/State: <select name ="state" id ="state"></select> 
      <script language="javascript">print_country("country");</script> 

</body> 
</html>

和states.js

var country_arr = new Array("Andaman & Nicobar ","Andhra pradesh","Arunachal Pradesh","maharashtra"); 

var s_a = new Array(); 
s_a[0]=""; 
s_a[1]="Nicobar|North and Middle Andaman|South Andaman"; 
s_a[2]=" Adilabad|Anantapur|Chittoor|East Godavari|Guntur|Hyderabad|Kadapa|Karimnagar|Khammam|Krishna|Kurnool|Mahabubnagar|Medak|Nalgonda|Nellore|Nizamabad|Prakasam|Rangareddy|Srikakulam|Visakhapatnam|Vizianagaram|Warangal|West Godavari"; 
s_a[3]="Anjaw|Changlang|Dibang Valley|East Kameng|East Siang|Kurung Kumey|Lohit|Lower Dibang Valley|Lower Subansiri|Papum Pare|Tawang|Tirap|Upper Siang|Upper Subansiri|West Kameng|West Siang"; 



function print_country(country_id){ 
    // given the id of the <select> tag as function argument, it inserts <option> tags 
    var option_str = document.getElementById(country_id); 
    var x, i=0; 
    for(x in country_arr){ 
     option_str.options[i++] = new Option(country_arr[x],country_arr[x]); 
    } 
} 

function print_state(state_id, state_index){ 
    var option_str = document.getElementById(state_id); 
    var x, i=0; state_index++; 
    var state_arr = s_a[state_index].split("|"); 
    for(x in state_arr){ 
      option_str.options[i++] = new Option(state_arr[x],state_arr[x]); 
    } 
}

當我嘗試選擇選項，從先前選中狀態的城市出現在第二個下拉框。如何避免這種??

來源

2013-11-03 HungryDB

因爲您還沒有從「state_id」元素中刪除以前添加的城市。因此，在獲取狀態元素的id之後，在您的print_state函數中刪除其所有子元素，然後繼續。您可以應用很多方法從DOM節點中刪除子元素。其中的一個純JavaScript方法如下：

while(option_str.hasChildNodes()){ 
    option_str.removeChild(option_str.lastChild); 
}

再來一個更簡單的方法班輪將使用innerHTML屬性，如果你能在你的情況下使用：

option_str.innerHTML = "";  //will remove everything including the childs from the DOM node

來源

2013-11-03 08:02:01

如何爲州和城市創建相關的下拉列表

回答

相關問題