How to populate drop down from another dropdown Ajax-jQuery

Question

I have two dropdownds for select province and city.Once user select his province from first dropdown , second dropdown should load relevant cities for that province.I have tried as below.my cities are load in to my console.log,but doesn't append in my second dropdown list.

Province dropdown

<select
   class="form-control form-control-select chosen-select""
   id="provinceSelect"
    onchange="loadCities(this.value);">
     <option value disabled selected>Please select</option>
   </select>

City dropdown

<select
   class="form-control form-control-select chosen-select""
   id="citySelect">
     <option value disabled selected>Please select</option>
   </select>


<script type="text/javascript">
   var base_url = window.location.origin;

**// Load Province from API** 

 $.ajax({
   url: base_url + "xx/rest?module_action=getProvince",
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   type: "GET",
   success: function (response) {
     var selOpts = "";

     for (i=0;i<response.data.length;i++)
      {

        var id = response.data[i]['id_province'];
        var val = response.data[i]['province'];
        selOpts += "<option value='"+id+"'>"+val+"</option>";
      }
      $('#provinceSelect').append(selOpts);
 }
 });

 function loadCities(id){

 **// Load CIties from based on province id** 

   $.ajax({
     url: base_url + "xx/rest?module_action=getCity&id="+id+"",
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     type: "GET",
     success: function (response) {
       var selOpts = "";

       for (i=0;i<response.data.length;i++)
        {
          console.log("xxx --->"+response.data[i]['area'])
          var id = response.data[i]['id_city'];
          var val = response.data[i]['area'];
          selOpts += "<option value='"+id+"'>"+val+"</option>";
        }
        $('#citySelect').append(selOpts);
        console.log("selOpts "+selOpts);
   }
   });

 }
 </script>

It's print on my console.but not showing in second dropdown

This class implies that you may be using a plugin on the `` element, but something rendered by the plugin. Perhaps you need to use the plugin's API to add options to it? Or re-initialize the plugin after adding the new options? — David, May 21 '20 at 14:16
@David earlier there were only city dropdown and it's loaded from smarty.Then i got a requirement to load cities from province.i cannot handle this requirement from smarty.then i have call ajax and jquery as solution — Tje123, May 21 '20 at 14:22
Smarty doesn't appear to have anything to do with the question. Are your ` — David, May 21 '20 at 14:23

How to populate drop down from another dropdown Ajax-jQuery

0 Answers0