javascript - 没有 jQuery 或 Ajax 的链式选择

Question

我正在使用 XAMPP Lite - USB 版本，发现 jQuery 链接选择框脚本不起作用，因为它们依赖于在我的 XAMPP 上不起作用的 AJAX。

我有两个选择框:

<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 数组变量必须有多长才能保存所有数据并不重要。我只需要有人帮我开始编写脚本。

Answer 1

here's a quick sample ，未优化但可以完成工作。如前所述，没有 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;
    }())

}());​