无法将JSON加载到自定义选择框
无法将JSON加载到自定义选择框
提问于 2018-03-14 14:32:43
我正在开发一个显示省份和城市的select box，我决定使用w3school中的代码，它将您的select标记转换为divs，这样我就可以应用更多的css。
我的问题是我无法将数据从JSON加载到自定义选择框中，也无法加载我创建的功能。
function loadProvince(){
$("#provinceCity").html("<option value=''>Select province</option>");
for (var i=0; i<province.length; i++){
$("#provinceCity").append("<option value='"+province[i]["id"]+"'>"+province[i]["name"]+"</option>");
}
}
$(document).ready(function(){
loadProvince();
$("#provinceCity").change(function(){
var selectedText = $("#provinceCity option:selected").text();
if (selectedText != 'Select province') {
if (localStorage.getItem("selectedProvince") === null) {
localStorage.setItem("selectedProvince", selectedText);
}else if (localStorage.getItem("selectedProvince") !== null) {
localStorage.setItem("selectedCity", selectedText);
var selectedProvinceCity = localStorage.getItem("selectedProvince") + "-" + localStorage.getItem("selectedCity");
$('#provinceCity').append($('<option>', {
value: selectedProvinceCity,
text: selectedProvinceCity,
selected: "selected"
}));
setTimeout(function(){
$('#provinceCity').click(function(){
loadProvince();
$(this).unbind('click');
localStorage.removeItem('selectedProvince');
localStorage.removeItem('selectedCity');
})
}, 500);
}
}
for (var i=0; i<province.length; i++){
if ($(this).val() == province[i]["id"]){
$("#provinceCity").empty();
var cities = province[i]["city"];
$("#provinceCity").html("<option value=''>Select city</option>");
for (var j=0; j<cities.length; j++){
$("#provinceCity").append("<option value='"+cities[j]["id"]+"'>"+cities[j]["name"]+"</option>");
}
}
}
});
$( window ).load(function() {
// Run code
localStorage.removeItem('selectedProvince');
localStorage.removeItem('selectedCity');
});
});回答 1
Stack Overflow用户
发布于 2018-03-14 15:28:46
用DIVs替换SELECT的代码只运行一次。如果后来更改了SELECT，它将不会生效。
您必须在每次选择更改时运行该代码。
只需将w3school中的代码包装在函数中
例如
function convertSelect2Divs() { // Added. Start of function select 2 div
var x, i, j, selElmnt, a, b, c;
....
....
....
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
} // Added. End of select 2 div并在函数loadProvince()和$("#provinceCity").change()的末尾运行convertSelect2Divs()
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49271102
复制相关文章
相似问题
腾讯云开发者
