鏈接選擇沒有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; 
    }()) 

}());​