2012-03-29 172 views
1

我使用XAMPP Lite - USB版本,發現jQuery鏈選擇框腳本不起作用,因爲它們依賴於AJAX,它不適用於我的XAMPP。鏈接選擇沒有jQuery或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數組變量必須佔用多長時間才能保存所有數據。我只是需要一個人,請給我一個腳本。

+0

那麼,到目前爲止,你有什麼不工作? – Joseph 2012-03-29 00:30:07

+0

爲什麼你不能使用jQuery?有可能在不使用Ajax調用的情況下使用javascript/jQuery ...雖然它會有點冒失鬼 - 建立一個js數組,與每個省對應,並使用jQuery根據所選省份更改選擇選項。 – 2012-03-29 00:36:00

回答

2

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

}());​ 
+0

此作品謝謝。 – Vidarious 2012-03-29 23:27:43

+0

它在FF和Chrome中可以正常工作,但在IE中甚至不能在IE9中正常工作。我沒有收到來自IE的F12開發插件的錯誤報告。有任何想法嗎? – 2014-01-15 06:46:53