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

【问题标题】：JQuery pass selected value to Ajax parameterJQuery 将选定的值传递给 Ajax 参数
【发布时间】：2013-11-22 22:19:43
【问题描述】：

我用了this pagination script，想用jq的ajax请求实现options过滤，用户触发时数据会用选择的值过滤，页面第一次加载时默认加载all数据。

我尝试将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...

谢谢。

【问题讨论】：

得到了你的答案 :) 见下文

标签： jquery filtering

【解决方案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);

【讨论】：

我的 phpscript 已准备好接受filterGenre，我会试试你的并报告给你
它的作品真棒！！但是当页面第一次加载时，默认情况下它不显示所有记录，知道吗？
那是因为它传递了 1 作为过滤器，所以它过滤了一个流派.....你应该将第一次加载更改为 loadData(1,0)，然后在另一个上更改你的 PHP一边检查 0，然后不过滤..然后选择 *.我会发布一个例子，但我不知道你的 php 代码是什么样子的......希望你明白我的意思
我加载所有记录的默认值是all
好的，然后将您的“第一次”loadData(1,1) 更改为 loadData(1,all)，应该这样做

【解决方案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>

【讨论】：