Question

我使用this pagination script并希望使用jq的ajax请求按选项实现过滤，当用户触发时，数据将使用所选值进行过滤，页面将在首次加载时默认加载all数据。 / p>

我试图将txt_filter传递给ajax的参数对象，该对象已准备好发送给PHP以处理数据，但是当我选择过滤选项时，下面的脚本不起作用。

当用户选择它时，如何将txt_filter传递给函数loadData？

// Filtering Options

<form id="formfilter" method="post" enctype="multipart/form-data">
   <div style="padding-bottom:6px;">
       Genre:<br />
       <select id="filterGenre">
        <option value="all" selected="selected">All</option>
        <option value='1'>Education</option>
        <option value='2'>Entertainment</option>
        <option value='3'>Documentary</option>
       </select>
   </div>
</form>


// Get filtering value stored in variable
var txt_filter;
$("#filterGenre").change(function(){
    txt_filter = $('#filterGenre').val();
    //alert(txt_filter);
});


// Pass filtering value to filterGenre
function loadData(page){
    $.ajax({
        type: "POST",
        url: "ajax_network_programs.php",
        data: { page: page, filterGenre: txt_filter },
        success: function(msg){
            $("#inner-main_content3").ajaxComplete(function(event, request, settings){
                $("#inner-main_content3").html(msg);
            });
        }
    });
}
loadData(1);  // For first time page load default results
  .
  .
  .
//blah blah codes not relevant...

感谢。

Answer 1

这个答案是假设您的PHP脚本已设置为已处理filterGenre。如果你还没有这样做，那么当然它不会工作.....你需要在后端有一个SQL查询来检查$ _POST ['filterGenre']，并应用相关的查询。

无论如何....假设你已经做到了，并且知道我在说什么.. 然后按以下步骤进行..

只需更改loadData函数即可获取两个参数... 页面和过滤器参数......

function loadData(page, filter){
$.ajax({
    type: "POST",
    url: "ajax_network_programs.php",
    data: { 'page': page, 'filterGenre': filter },
    success: function(msg){
        $("#inner-main_content3").ajaxComplete(function(event, request, settings){
            $("#inner-main_content3").html(msg);
        });
    }
});

}

然后在onchange处理程序中运行该函数......

$("#filterGenre").change(function(){
var txt_filter = $('#filterGenre').val();
loadData(1,txt_filter);
});

然后更新页面底部的功能，这是第一次页面加载.....

  loadData(1,1);

现在我假设当他们点击一个分页按钮时你想要运行这个函数，不管当前选择过滤器是什么...这样用户就可以根据你代码的链接用过滤器对结果进行分页。 ..只是这样做......

  $('#container .pagination li.active').live('click',function(){
  var page = $(this).attr('p');
  var txt_filter = $('#filterGenre').val();
    loadData(page, txt_filter);
  });

修改

首次加载页面时，您需要指定所有记录... 所以根据你告诉我的你的php页面... 这应该有用..

loadData(1,all);

Answer 2

根据我的要求，我需要向后端提交一个选择选项将所选选项存储在组合框中，以便传递我使用过的jquery 如下

<HTML>
<HEAD>
<script>
$(document).ready(function(){
$("#submid").click(function() { // loginForm is submitted
var conceptName = $('#sel_opt').find(":selected").val();// to send the selected combo box option 
$('#sel_opt').attr('name',conceptName);//passing option value to form combobox 
$.ajax({

url: "urls", 
data:{
"sel_opt":$("#sel_opt").attr("name"),
},

}); // ajax

});//click
});


</script>

</HEAD>

<BODY>
<select id="sel_opt" name="">    
<option>1</option>   
<option>2<option>   
<option>3</option>  
</select>



</BODY>
</HTML>

JQuery将选定的值传递给Ajax参数

2 个答案: