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

Posted 2023-05-08

【中文标题】如何在相扑选择下拉列表中显示 ajax 响应？

【英文标题】：How to display the ajax response inside sumo select dropdown?

【发布时间】：2019-12-02 20:16:16

【问题描述】：

我正在使用 sumoselect (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>

谁能帮我解决这个问题？

【参考方案1】：

@questionbank

您需要在成功操作中为异步加载的选择框重新加载 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();

【讨论】：

给我一些时间来检查你的答案

我只是想知道你为什么使用[1]？

@questionbank 您正在使用类选择器[$('.search_sumo')]..它总是返回元素数组..索引从 0 开始。所以第一个索引是您加载的 ajax 选择元素。它正在工作..对吗？

是的，它运行良好。我必须使用 $('.search_sumo')[2].sumo.reload();对于城市下拉菜单。对吗？

是的..每当动态加载下拉菜单时...您需要加载它以使其对“SumoSelect”效果产生影响..