javascript - <select> 更改另一个 <select> 中的选项的代码

Question

我在 Javascript 中编写了相同的代码，当用户更改状态时，该代码将更改城市下拉列表中的选项。

代码的问题是它无法工作。我认为代码没问题，但我对 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>       

Answer 1

尝试以下代码。我也 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>