过滤数据基于多个选择选项与ajax jquery php

Question

我有3个选择选项搜索数据表中的记录与ajax jQuery php。

我已经写了这段代码，但选择选项数据不去其他页面&没有从ajax请求返回。

PHP代码: -

<form name="search_form" id="search_form" method="POST"> 
<div class="col-md-3">
<div class="formrow">
<select class="form-control" name="job_title" class="select_filter">
<option value ='' disabled selected>Job Title</option>
<option>PHP Developer</option>
<option>Andorid Developer</option>
</select>
</div>
</div>

<div class="col-md-3">
<div class="formrow">
<select class="form-control" name="emptype" class="select_filter">
<option value ='' disabled selected>Employment Status</option>
<option>Permanent</option>
<option>Contract</option>
<option>Freelance</option>
</select>
</div>
</div>

<div class="col-md-3">
<div class="formrow">
<select class="form-control" name="experience" class="select_filter">
<option value ='' disabled selected>Experience</option>
<option>Fresher</option>
<option>1 Year</option>
<option>2 Years</option>
<option>3 Years</option>
<option>4 Years</option>
<option>5 Years</option>
<option>6 Years</option>
<option>7 Years</option>
<option>8 Years</option>
<option>9 Years</option>
<option>10 Years</option>
</select>
</div>
</div>
</form>

jQuery/Ajax代码:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<script type="text/javascript" rel="stylesheet">
$(document).ready(function(){
$('.select_filter').on('change',function(){

$.ajax({
type: "POST",
url: "ajaxCompany_search.php",
data: $('#search_form').serialize(),
success:function(data){
console.log(data);
alert(data);
$("#projects").html(data);
}
});
});
});
</script> 

ajaxCompany_search.php

<?php
include('../../config.php');
print_r($_POST);
?>

Answer 1

您必须将类分组在一个唯一的标签中:

改变

class="form-control"    ... class="select_filter" 

class="form-control select_filter"

Answer 2

您已经在select字段中两次给出class，因此没有显示数据。

<select class="form-control" name="job_title" class="select_filter">

将代码写成

<select class="form-control select_filter" name="job_title">

就像这样写在这里