如何在 sumo select 下拉列表中显示 ajax 响应？

Question

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

我有三个下拉菜单 countries, state, and cities。国家/地区显示在下拉列表中，onchange 取决于国家/地区 ID 州名称将显示在下拉列表中。

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

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>

谁能帮我解决这个问题？

Answer 1

@questionbank

您需要在成功操作中为异步加载的 select 框重新加载 sumo init。

所以在你的Ajax成功应该如下..

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

如何在 sumo select 下拉列表中显示 ajax 响应？

How to display the ajax response inside sumo select dropdown?

javascript

jquery

ajax

codeigniter-3

sumoselect.js