Блог

Я просмотрел StackOverflow и нашел пару вопросов / ответов, которые близки, но не точны для моей ситуации. Я следую этому примеру:

http://www.javascriptkit.com/javatutors/selectcontent2.shtml

И мой JavaScript-код выглядит следующим образом:

 var cityList = document.selectionForm.cityListBox;
var cities = new Array();

cities[0] = "";
cities[1] = ["Eugene|eugeneValue", "Portland|portlandValue", "Salem|salemValue"];
cities[2] = ["Bellingham|bellinghamValue", "Onalaska|onalaskaValue", "Seattle|    seattleValue"];

function updateCities(cityGroup) 
{
    cityList.options.length = 0;

    if (cityGroup > 0)
    {
        for (i = 0; i < cities[cityGroup].length; i  )
        {
            cityList.options[cityList.options.length] = new Option(cities[cityGroup][i].split("|")[0], cities[cityGroup][i].split("|")[1]);
        }   
    }
}
  

И мой HTML-код, подобный этому:

 <form name="selectionForm">
    <select name="stateListBox" size="3" style="width: 150px" onchange="updateCities(this.selectedIndex);">
        <option selected>Select a State >></option>
        <option value="oregon">Oregon</option>
        <option value="washington">Washington</option>
    </select>

    <select name="cityListBox" size="3" style="width: 150px" onclick="alert(this.options[this.options.selectedIndex].value);">
    </select>
</form>
  

Насколько я могу судить, это должно работать так, как описано по ссылке выше. У меня был отличный опыт работы с веб-сайтом JavaScript Kit, но на этот раз я думаю, что чего-то не хватает.

Когда я на самом деле публикую это на странице, я могу щелкнуть штаты, но в поле города ничего не появляется, как и ожидалось.

Кто-нибудь может увидеть здесь проблему?

Приветствуется любая помощь.

PS — Я прошу прощения, если есть двойной пост, который я пропустил. Также приветствуются любые ссылки.

Более удобочитаемое решение с использованием jQuery, которое не требует синхронизации двух списков (штаты и города определены в структуре данных javascript)

HTML:

 <form name="selectionForm">
    <select name="states" id="states" size="3" style="width: 150px">
        <option selected>Select a State >></option>
    </select>

    <select name="cities" id="cities" size="3" style="width: 150px"></select>
</form>
  

javascript:

 jQuery(function($) {
    initCities();

    function initCities() {
        var statesAndCities = {
            'Oregon': ['Eugene', 'Portland', 'Salem'],
            'Washington': ['Bellingham', 'Onalaska', 'Seattle']
        };

        //populate states
        $.each(statesAndCities,function(k,v){$('#states').append('<option>'   k   '</option>');});

        //populate cities
        $('#states').change(function(){
            var $cities = $('#cities');
            $cities.html("");
            var cities = statesAndCities[$(this).val()];
            $.each(cities,function(k,v){$cities.append('<option>'   v   '</option>');});
        });
    }

});
  

ДЕМОНСТРАЦИЯ:

http://jsfiddle.net/82frv/1/

в цикле for в updateCities инструкция начинается с citylist.options изменения citylist на cityList (заглавная буква L)

Тогда будет работать.

Всего две вещи:

• Вам нужен document.forms.selectionForm, формы находятся в этой коллекции

• Способ написания скрипта заключается в том, что он должен быть размещен на странице после тега, поскольку он пытается получить к нему немедленный доступ

Никаких других изменений не требуется.