无法将JSON加载到自定义选择框 [英] Unable to load JSON to custom select box

问题描述

我正在使用选择框，其中显示了省份和城市，因此我决定使用 w3school 中的代码将您的选择标记转换为div，这样我可以应用更多的CSS.

Im working on a select box which displays province and cities and I decided to to use the code from w3school which converts your select tag to divs so that I can apply more css.

我的问题是我无法将数据从JSON加载到该自定义选择框，以及我所做的功能.

my problem is I cant load the data from JSON to that custom select box, and also the functionalities I made.

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

示例代码

推荐答案

代码夹将SELECT替换为DIV仅运行一次. SELECT以后更改后，它不会生效.

Code wich replaces SELECT by DIVs runs only one time. When SELECT has changed later, it doesn't take effect.

每次SELECT更改时，您都必须运行该代码.

You must run that code each time whan SELECT changed.

只需包装 w3school 中的代码即可功能

Just wrap code from w3school in function

例如

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

And run convertSelect2Divs() at the end of functions loadProvince() and $("#provinceCity").change()

这篇关于无法将JSON加载到自定义选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！