链接选择没有jQuery或Ajax

Question

我使用XAMPP Lite - USB版本，发现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数组变量必须占用多长时间才能保存所有数据。我只是需要一个人，请给我一个脚本。

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

}());​