我正在使用 XAMPP Lite - USB 版本,发现 jQuery 链接选择框脚本不起作用,因为它们依赖于 AJAX,而 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 数组变量必须有多长才能保存所有数据并不重要。我只需要有人帮我开始写剧本。
这是一个快速示例,未优化但可以完成工作。如前所述,没有 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;
}())
}());
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)