如何将多选过滤器与 ajax 一起使用 - How to use multiselect filter with ajax

How to use multiselect filter with ajax

本文关键字：ajax 一起过滤器 | 更新日期: 2023-09-26

大家好，我有从这个源下载的多选过滤器 http://www.erichynds.com/，我正在尝试将其与 Ajax 一起使用，尽管我的 ajax 函数正在工作，并在 window.alert(html) 中显示由 php 生成的 html，但多选文件管理器没有效果，我真的不知道如何解决它。这就是我到目前为止所做的

.HTML

 <table>
  <tr>
  <td>
  <select id='pr_select' name='prj' onChange='show("pr_select","output1");' >
      <option value='28'>28</option>
      <option value='29'>29</option>
      <option value='30'>30</option>
  </select>
  </td>
  </tr>
  <tr>
  <td>
  <div id='output1'></div></td>
  </tr>
  </table>

JAVASCRIPT

<script>
  function show(sel,id) {
    var selected = $("#"+sel).val();  
    $("#"+id).html( "" );
    if (selected.length > 0 ) { 
     $.ajax({
            type: "GET",
            url: "get_data.php",
            data: "select="+selected,
            cache: false,
            beforeSend: function () { 
                $("#"+id).html('<img src="loader.gif" alt="" width="24" height="24">');
            },
            success: function(html) { 
                // Ajax is success but multiselect is not working.....   
                window.alert(html),
                $("#"+id).html( html );
            }
        });
    } 
  }
  $(document).ready(function(){
     $("#test").multiselect();
  });
  </script>

在 ajax 成功块中生成的输出 - window.alert

  <select id='test' name='multiple_data[]' multiple='multiple'>
  <option value='USA'>USA</option>
  <option value='UK'>UK</option>
  </select>

我什至尝试过output1部门也像这样没有运气

 $(document).ready(function(){
     $("#output1").multiselect();
  });

尽量不要在 doc ready 上绑定该方法，而是在 ajax 的complete方法中应用：

<script>
  function show(sel,id) {
    var selected = $("#"+sel).val();  
    $("#"+id).html( "" );
    if (selected.length > 0 ) { 
     $.ajax({
        .......
            success: function(html) { 
                // Ajax is success but multiselect is not working.....   
                window.alert(html),
                $("#"+id).html( html );
            },
            complete:function(){
                   $("#test").multiselect(); // add it here in the ajax
            }
        });
    } 
  }
  </script>

这将解决您的问题尝试

success: function(html){    
        document.getElementById(id).innerHTML = html;
        $("#"+id).multiselect().multiselect('refresh').multiselectfilter();
      },