链接选择没有jQuery或Ajax
我使用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数组变量必须占用多长时间才能保存所有数据。我只是需要一个人,请给我一个脚本。
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;
}())
}());
此作品谢谢。 – Vidarious 2012-03-29 23:27:43
它在FF和Chrome中可以正常工作,但在IE中甚至不能在IE9中正常工作。我没有收到来自IE的F12开发插件的错误报告。有任何想法吗? – 2014-01-15 06:46:53
那么,到目前为止,你有什么不工作? – Joseph 2012-03-29 00:30:07
为什么你不能使用jQuery?有可能在不使用Ajax调用的情况下使用javascript/jQuery ...虽然它会有点冒失鬼 - 建立一个js数组,与每个省对应,并使用jQuery根据所选省份更改选择选项。 – 2012-03-29 00:36:00