没有jQuery或Ajax的链式选择 [英] Chained Select with NO jQuery or Ajax

问题描述

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

I'm using XAMPP Lite - USB Version and found that the jQuery chained select boxes scripts don't work because they rely on AJAX which is not working on my 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数组变量必须保留多长时间才可以容纳所有数据.我只需要一个人就可以开始使用脚本.

I need to be able to select a province and load different cities into the "city" name select. I have to do this without jQuery or Ajax. FYI It does not matter how long the javascript array variables have to be which will hold all the data. I just need someone to start me out with the script please.

推荐答案

这是一个快速示例，没有优化，但做的工作.如前所述，没有jQuery，也没有AJAX.此版本适用于符合标准的浏览器，您需要针对IE进行调整，因为我没有要测试的IE.

here's a quick sample, not optimized but does the job. as said, no jQuery and no AJAX. this one works in standards compliant browsers, you man need to tweak it for IE coz i have no IE to test on.

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

}());​

这篇关于没有jQuery或Ajax的链式选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！