1

I have made same code in Javascript that will change options in drop-down list of cities when user changes state.

The problem with the code is that it won't work. I think that code is OK, but I am very new in JavaScript, so I can't see the error.

Can you please check my code and see where I made error. Thanks.

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);
        }
    }

And this is 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>       
6
  • 1
    See here: stackoverflow.com/questions/11483387/… Jul 24, 2012 at 16:51
  • 1
    How about doing some basic debugging via your console? There are multiple things wrong here (e.g. typos, undefined variables). Jul 24, 2012 at 16:52
  • 1
    You define obj_state and then try to reference obj_states in the next line. Where is town_list?
    – ashastral
    Jul 24, 2012 at 16:53
  • 1
    I see a few typos, not sure if they're in your actual code as well: var index = obj_states.selectedIndex; should be obj_state for (var i = 0; i < gradovi.length; i++) { should be towns.length Also you should declare the towns variable in scope to prevent it from going into the global scope. "var towns = ..." I haven't had any luck modifying selects in IE7, I've only gotten them working by creating a new select each time.
    – jholloman
    Jul 24, 2012 at 16:56
  • 1
    @depecheSoul: Perhaps creating a fiddle would be helpful in narrowing your question down to a specific issue. Jul 24, 2012 at 17:02

1 Answer 1

0

Try the following code. I've also put up a fiddle to demonstrate.

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.