使用ajax jquery php基于多选选项过滤数据

Posted 2023-05-09

【中文标题】使用ajax jquery php基于多选选项过滤数据

【英文标题】：Filter Data based on Multiple Select option with ajax jquery php

【发布时间】：2021-05-11 20:17:39

【问题描述】：

我有 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);
?>

【问题讨论】：

离题：<script type="text/javascript" rel="stylesheet"> 错了。应该是<script type="text/javascript">

【参考方案1】：

你必须将类分组到一个 uniq 标签中：

改变

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

到

class="form-control select_filter"

【讨论】：

谢谢先生，它的工作，但我还有其他问题可以问吗？

请询问，以便每个人都可以看到并可能提供帮助。

所以你有数据返回？所以问题没问题..现在如果你有另一个问题，可能结果不好，我建议你打开一个新问题，以避免污染。解决第一个问题后修改问题不好..

【参考方案2】：

您在选择字段中两次上课，因此未显示数据。

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

写代码

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

原来是这样写的

【讨论】：

好的，问题解决了。