如何在相扑选择下拉列表中显示ajax响应？

Question

我正在使用 sumoselect ( http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html )。

我有三个下拉菜单称为countries, state, and cities. 国家/地区显示在下拉列表中，onchange根据国家/地区 ID 状态名称将显示在下拉列表中。

现在我的问题是，我没有在下拉列表中获得州名，而是在查看源代码。检查下图。如果我从下拉列表中删除 sum select 类，那么它就可以工作了。

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>

任何人都可以帮我解决这个问题吗？