0

I'm working a simple dropdown menu that changes the options after selecting the provinces to city.

What I want is, to prevent the dropdown to close after choosing the province, but just update the options inside to cities.

I tried this code.

$(document).on('click', '#provinceCity', function (e) {
  e.stopPropagation();
});

but doesn't work on me.

here's my code

CODEPEN

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



});

0 Answers0