javascript - php下拉过滤器不起作用

Question

这是产品过滤页面。我想通过下拉过滤数据。通过 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>

Answer 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);
                }
            });
        });

    });