2012-07-24 53 views
1

我在Javascript中创建了相同的代码,当用户更改状态时,这些代码将在城市的下拉列表中更改选项。其中<select>更改另一个选项中的选项<select>

代码的问题是它不起作用。我认为代码是可以的,但我在JavaScript中很新,所以我看不到错误。

你可以检查我的代码,看看我犯了什么错误。谢谢。

的JavaScript:

function drzava_promjena() { 
    var obj_state = document.getElementById("id_drzava") 
    var index = obj_states.selectedIndex; 
    var value_state = obj_state.options[index].value; 
    towns = town_list[value_state]; 
    var obj_town = document.getElementById("id_gradovi"); 
    while (obj_town.options.length > 0) { 
     obj_town.remove(0); 
    } 
    var new_value; 
    for (var i = 0; i < towns.length; i++) { 
     new_value = document.createElement("option"); 
     new_value.value = towns[i]; 
     new_value.text = towns[i]; 
     try { 
      obj_town.add(new_value); 
     } catch (e) { 
      obj_town.appendChild(new_value); 
     } 
    } 

这是HTML:

<select id="id_drzava" onchange="drzava_promjena(this);"> 
     <option value="Austrija">Austrija</option> 
     <option value="Njemacka">Njemacka</option> 
     <option value="Slovenija">Slovenija</option> 
     <option value="Ceska">Ceska</option> 
    </select> 
    <br> 
    <select id="id_gradovi" onchange=""> 
     <option value="0"></option> 
    </select> 
    <br> 
    <select id="id_uni" onchange=""> 
     <option></option> 
    </select>  
+1

在这里看到:http://stackoverflow.com/questions/11483387/drop-down-menu-for-selecting-country-then-状态/ 11483802#11483802 – 2012-07-24 16:51:33

+1

如何通过控制台进行一些基本的调试?这里有很多错误(例如拼写错误,未定义的变量)。 – 2012-07-24 16:52:04

+1

您定义了'obj_state',然后尝试在下一行中引用'obj_states'。 'town_list'在哪里? – Fraxtil 2012-07-24 16:53:42

回答

0

试试下面的代码。我也有put up a fiddle来演示。

的JavaScript:

var populateCities = function (country, target_id) { 
    var i = 0, options, cities, selection, target; 

    cities = { 
     "usa": { 
      "dallas": "dal", 
      "san francisco": "sf", 
      "houston": "hou" 
     }, 
     "fr": { 
      "paris": "pr", 
      "la riche": "lr" 
     } 
    }; 

    selection = country.options[country.selectedIndex].value; 
    target = document.getElementById(target_id); 
    target.options.length = 0; 

    if(selection !== 'none') { 
     options = cities[selection]; 

     for(var city in options) { 
      target.options[i] = new Option(city, options[city]); 
      i++; 
     } 
    } 
}​ 

HTML:

<select id="country" onchange="populateCities(this, 'cities')"> 
    <option selected value="none">Pick a country</option> 
    <option value="usa">USA</option> 
    <option value="fr">France</option> 
</select> 
<select id="cities"></select> 
相关问题