这是产品过滤页面。我想通过下拉过滤数据。通过php和mysqli数据库。我从数据库中获取数据并放入下拉列表。但选择值后它不会过滤。从很久以来的努力。尽一切可能。请帮我解决这个代码谢谢。
var colour,brand,size,achievements ;
$(function(){
$('.item_filter').click(function(){
$('.product-data').html('<div id="loaderpro" style="" ></div>');
colour = multiple_values('colour');
brand = multiple_values('brand');
size = multiple_values('size');
achievements = multiple_values('achievements');
$.ajax({
url:"ajax.php",
type:'post',
data:{colour:colour,brand:brand,size:size,achievements:achievements,sprice:$(".price1" ).val(),eprice:$( ".price2" ).val()},
success:function(result){
$('.product-data').html(result);
}
});
});
});
function multiple_values(inputclass){
var val = new Array();
$("."+inputclass+":checked").each(function() {
val.push($(this).val());
});
return val;
}
<div class="list-group">
<select>
<option class="item_filter" value="showAll" selected="selected">Show All Products</option>
<?php
$query = "select your_achievements from info_user where user_status = '1'";
$rs = mysqli_query($con,$query) or die("Error : ".mysqli_error());
while($achievementsdata = mysqli_fetch_assoc($rs))
{
?>
<option selected="selected" class="item_filter" value="<?php echo $achievementsdata['your_achievements']; ?>"><?php echo $achievementsdata['your_achievements']; ?></option>
<?php
}
?>
</select>
</div>
答案 0 :(得分:1)
尝试像这样使用onchange
事件
$('select').on('change', function() {
alert( this.value );
})
你的数据变量应该是这样的
data:{'colour':colour,'brand':brand,'size':size,'achievements':achievements,'sprice':$(".price1" ).val(),'eprice':$( ".price2" ).val()},
确保您所有变量的值都存在。 你的ajax代码应该是这样的
$(function(){
$('select').on('change', function() {
$('.product-data').html('<div id="loaderpro" style="" ></div>');
colour = multiple_values('colour');
brand = multiple_values('brand');
size = multiple_values('size');
achievements = multiple_values('achievements');
$.ajax({
url:"ajax.php",
type:'post',
data:{'colour':colour,'brand':brand,'size':size,'achievements':achievements,'sprice':$(".price1" ).val(),'eprice':$( ".price2" ).val()},
success:function(result){
$('.product-data').html(result);
}
});
});
});