Question

我有3个选择包含不同的类别。我的网站显示出去吃饭的地方，然后我有一个选择，让你在餐厅，酒吧之间进行选择......另一个选择将让你选择一系列的价格和最后一个将让你选择那种氛围这个地方有。

我设置的方式如下：

我有3个选项和一个.click函数，当您在任何下拉菜单中选择某个内容时，它会弹出：

$(".form_comer div.jqTransformSelectWrapper ul li a, .form_salir div.jqTransformSelectWrapper ul li a, .form_dormir div.jqTransformSelectWrapper ul li a, .form_visitar div.jqTransformSelectWrapper ul li a").click(function(){

var index= $(this).attr('index');
var sel= ($(this).closest('div')).children('select').attr('id');
var value = $('select.jqTransformHidden option:eq('+index+')').attr('value');
       $.ajax({
     type: "POST",
     url: $("#form").attr("action"),
     data: "value=" + value + "&sel=" + sel,
     dataType: 'html',
     success: function(data) {
        $("#cont-pag").html(data);
     }
     });
  return false; //prevent default browser action
});

这是一个jqTransformed选择，这使代码更难。值是所选项目的值，sel是所选项目的ID（例如，价格）

这将调用这个php文件，我在那里查询并绘制我的html，它将显示适合所选类别的地方（一个酒吧，一个15欧元的地方......）但它只适用于那个类别，因为我无法保存以前的选择，我无法选择适合同时选择的2个或3个类别的地方：首先我选择查看al餐馆，然后点击花费40€的地方，当我这样做的时候我希望它仍然只显示餐馆，但我不能通过ajax请求来填充我的变量。

如何做到这一点？

Answer 1

您可以使用$(select#id).val()获取所有三个选择列表的值，并在ajax调用中传递它们。然后，您可以检查哪些值不为空，并附加不属于您查询的值。

e.g。

$atmosphere = $_POST["atmosphere"];
if(!empty($atmosphere))
{
    $query .= " AND atmosphere = '$atmosphere'";
}

如果该插件阻止您响应点击或更改，则本文可能会对您有所帮助。 The jqTransform select problem and its solution

如果获取其他选择列表的值是一个问题，因为插件不允许轻松识别，您可以尝试循环元素。我用firebug检查了jqTransform表单的结构，并注意到所选的值总是放在一个内部而另一个内部使用class =“jqTransformSelectWrapper”，所以你可以将jQuery的.each()与.find()组合使用或者得到每个jqTransformSelectWrapper的第二个div的第一个范围的.text()的东西

有些事情：

$('.jqTransformSelectWrapper').each(function(){$(this).find(div)[0].find(span)[0].text();});

将此视为伪代码，我对jQuery不是很有经验

Answer 2

我建议您在每次向PHP端点发出请求时从三个字段中的每个字段传递一个值。像这样：

date: "type=" + $("#type_select").val() + "&price=" + $("#price_select").val() + "&atmosphere" = $("#atmosphere_select").val(),

然后让你的PHP制定一个只从数据库中提取相关行的查询。

这样，如果使用多个过滤器，则不会从数据库中提取不需要的行，并且不需要对Javascript进行太多修改。我可以想象value = type＆amp; sel = restaurant可能会在你当前的实现中成为相当大的结果集。

使用带有ajax函数的多个选择缩小搜索范围

2 个答案: