动态依赖选择框（PHP+JQuery+AJAX）

Posted 2023-05-09

【中文标题】动态依赖选择框（PHP+JQuery+AJAX）

【英文标题】：Dynamic dependent select boxes (PHP+JQuery+AJAX)

【发布时间】：2016-11-16 17:34:52

【问题描述】：

我一直在使用 php 作为服务器端语言和使用 Ajax 的 JQuery 开发一个依赖选择框表单。我在获取响应文本时遇到问题，因为它没有在第二个选择框中显示为选项。

附：我是 Ajax 新手，没有任何视频可以帮助我解决问题。

html&PHP：

<center><form method="post" action="php/functions.php" id="catForm">
<select name="catSelect" class="catSelect" name="category">
<option value='null' default>اختر الفئة:</option>
<?php 
        $selectCategories = mysqli_query($connectionDB, "SELECT * FROM categories");

        while($categoriesDisplay = mysqli_fetch_array($selectCategories))
    echo '<option value="'.$categoriesDisplay['id'].'">'.$categoriesDisplay['category'].'</option>';
        
 ?>
</select><br/><br/>

<select name="subCatSelect" class="subCatSelect">
<option value="null" default>اختر النوع:</option>
<?php
$catSelectVal = $_POST['catSelect'];
$selectSubCat = mysqli_query($connectionDB, "SELECT * FROM sub_categories WHERE id LIKE '$catSelectVal'");

while($subCatDisplay = mysqli_fetch_array($selectSubCat))
    echo '<option value="'.$subCatDisplay['id'].'">'.$subCatDisplay['subCategory'].'</option>';


?>
</select><br/>
<h1></h1>
<input type="submit" value="اختر" class="submitForm" /><br/>
</form></center>

jQuery 代码：

$(document).ready(function()
    $('.catSelect').change(function()
        var changeURL = $('#catForm').attr("action");
        var data = $('.catSelect').val();
        $.post(changeURL, category : data, function(subCategory)
            $('.subCatSelect').append(subCategory);
        );
    );
);

获取第二个选择框选项的代码：

$catSelectVal = $_POST['catSelect'];
$selectSubCat = mysqli_query($connectionDB, "SELECT * FROM sub_categories WHERE id LIKE '$catSelectVal'");

while($subCatDisplay = mysqli_fetch_array($selectSubCat))
    echo '<option value="'.$subCatDisplay['id'].'">'.$subCatDisplay['subCategory'].'</option>';

【问题讨论】：

您是否使用浏览器 js 调试器进行了任何调试。特别是这一行var data = $('.catSelect').val();

PHP 脚本中的 print_r($_POST); 也可能会识别另一个错误

这会帮助你***.com/questions/2780566/…

您对SQL Injections 持开放态度，应该真正使用Prepared Statements 而不是连接您的查询。

【参考方案1】：

我可能是错的，但我认为您没有在 ajax 请求中发送 'catSelect'。而是您发送了 category ，其中 data 是来自 'catSelect' 的值

因此，当您查找 $catSelectVal = $_POST['catSelect']; 时，将找不到任何东西。

改用：$catSelectVal = $_POST['category'];

正如@RiggsFolly 提到的，如果您print_r($_POST); 您会立即看到是否是这种情况。

【讨论】：

我已经做到了，现在可以了；但是我的结果重复为“类别”->“子类别1，子类别2，子类别1，子类别2”

我一直在努力解决它，观看了一些视频并查看了一些代码。但似乎没有任何帮助。

我不是 100% 确定你在这里的意思，但假设这是密钥的问题，也许试试 mysqli_fetch_assoc 而不是 mysqli_fetch_array？