Question

我正在使用select box来显示省份和城市，我决定使用w3school中的代码将您的select标记转换为div，以便我可以应用更多的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');
});
});

SAMPLE CODE

Answer 1

代码替换SELECT by DIV只运行一次。 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（）和$（＆＃34; #southernCity＆＃34;）的末尾运行convertSelect2Divs（）。change（）

无法将JSON加载到自定义选择框

1 个答案: