Цепной выбор без JQuery или Ajax - PullRequest
Новая
       29

Цепной выбор без JQuery или Ajax

1 голос
/ 29 марта 2012

Я использую XAMPP Lite - USB Version и обнаружил, что сценарии цепочек выбора jQuery не работают, потому что они используют AJAX, который не работает на моем XAMPP.

У меня есть два поля выбора:

<label>Province</label>
<select name="province"> 
<option value="ontario">Ontario</option>
<option value="quebec">Quebec</option>
<option value="novascotia">Nova Scotia</option>
</select> 

<label>city</label>
<select name="city"> 
</select>

Мне нужно иметь возможность выбрать провинцию и загрузить разные города в название города.Я должен сделать это без JQuery или Ajax .К вашему сведению, не имеет значения, как долго должны быть переменные массива javascript, которые будут содержать все данные.Мне просто нужен кто-то, чтобы начать меня со сценарием, пожалуйста.

1 Ответ

2 голосов
/ 29 марта 2012

вот быстрый пример , не оптимизированный, но выполняющий свою работу.как сказано, нет JQuery и нет AJAX.этот работает в совместимых со стандартами браузерах, вам нужно настроить его для IE, потому что у меня нет IE для тестирования. 

<label>Province</label>
<select id="province"> 
    <option value="p1">p1</option>
    <option value="p2">p2</option>
    <option value="p3">p3</option>
</select> 

<label>city</label>
    <select id="city"> 
</select> ​


window.onload = (function() {

    var locations = {
        'p1': [
            'p1c1',
            'p1c2',
            'p1c3',
            ],
        'p2': [
            'p2c1',
            'p2c2',
            'p2c3',
            ],
        'p3': [
            'p3c1',
            'p3c2',
            'p3c3',
            ],
    };

    var provinces = document.getElementById('province');
    var cities = document.getElementById('city');

    provinces.addEventListener('change', function() {
        loadCities(this.value)
    }, false)


    var loadCities = (function loadCitiesFunc(key) {
        key = key || 'p1';
        var docFragment = document.createElement('select');
        for (var i = 0; i < locations[key].length; i++) {
            docFragment.appendChild(new Option(locations[key][i], locations[key][i]));
        }
        cities.innerHTML = docFragment.innerHTML;

        return loadCitiesFunc;
    }())

}());​
...