How to display the ajax response inside sumo select dropdown?

Question

I am using sumoselect (http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html).

I have three dropdowns called as countries, state, and cities. Countries are displaying in the dropdown and onchange depending upon the countries id state name will display in the dropdown.

Now my issue is, I am not getting the state name in the dropdown but getting on view source. Check below image. If I remove sum select class from the dropdown then it's working.

JS

$('.search_sumo').SumoSelect({search: true, searchText: 'Enter here.'});

$(".country_change").on('change',function(){
      var country_id=$(this).val();
      var select_list = $(this).data('target'); // The dropdown ID
  $.ajax({
      url:baseUrl +"/System_control/statename",
      method:"POST",
      data:"country_id="+country_id,
      dataType: "json",
      success:function(data){
        //alert(data);
        $('#'+select_list).empty();
        var placeholder="<option value='' disabled selected>Select state</option>";
        $('#'+select_list).html(placeholder);
            $.each(data, function(i, data) {
          $('#'+select_list).append("<option value='" + data.id + "'>" + data.state_name + "</option>");
            });
      }
     });
  });

HTML

 <select name="country" class="form-control search_sumo country_change" data-target="target_state_dropdown">
     <option selected disabled=""> Select country</option>
     <?php foreach ($get_country as $row) {?>
     <option value="<?php echo $row->id; ?>" <?php echo set_select('country',$row->id,False);?>><?php echo $row->country_name;?></option>
      <?php }?>
   </select>

 <select name="state" class="form-control search_sumo state_get" id="target_state_dropdown" data-target="city_dropdown">
 <option selected disabled=""> Select state</option>
 </select>

Can any one help me out with this issue?

Answer 1

@questionbank

You need to reload the sumo init for asynchronously loaded select box in your success action.

So in your Ajax success should be as follows..

success:function(data){

    $('#'+select_list).empty();
    var placeholder="<option value='' disabled selected>Select state</option>";
    $('#'+select_list).html(placeholder);
    $.each(data, function(i, data) {
        $('#'+select_list).append("<option value='" + data.id + "'>" + data.state_name + "</option>");
    });
    $('.search_sumo')[1].sumo.reload();
}