相关下拉列表不起作用，第二个下拉列表未加载答案

【问题标题】：Dependent dropdowns not working, 2nd dropdown not loading相关下拉列表不起作用，第二个下拉列表未加载
【发布时间】：2014-10-31 03:25:43
【问题描述】：

我需要这方面的帮助，我不知道为什么子猫无法加载。但第一个下拉列表会加载所有查询。我只是不知道为什么它不适用于第二个。

这是我的 index.php

<?php 
include('config.php'); 
$query_parent = mysql_query("SELECT * FROM zipcodes GROUP BY major_area") or die("Query failed: ".mysql_error());
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $("#parent_cat").change(function() {
        $(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
        $.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
            $("#sub_cat").html(data);
            $('#loader').slideUp(200, function() {
                $(this).remove();
            });
        }); 
    });

});
</script>
</head>

<body>
<form method="get">
    <label for="category">Parent Category</label>
    <select name="parent_cat" id="parent_cat">
        <?php while($row = mysql_fetch_array($query_parent)): ?>
        <option value="<?php echo $row['major_area']; ?>"><?php echo $row['major_area']; ?></option>
        <?php endwhile; ?>
    </select>
    <br/><br/>

    <label>Sub Category</label>
    <select name="sub_cat" id="sub_cat"></select>
</form>
</body>
</html>

这是我的 loadsubcat.php

<?php 
include('config.php');

$parent_cat = $_GET['parent_cat'];

$query = mysql_query("SELECT city FROM zipcodes WHERE major_area = {$parent_cat}") or die(mysql_error());
while($row = mysql_fetch_array($query)) {
    echo "<option value='$row[city]'>$row[city]</option>";
}
?>

请检查我的代码，并告诉我哪里做错了。它不会加载第二个下拉菜单。

【问题讨论】：

有没有报错？
@Rasclatt 没有，但我很确定它与 javascript 有关，我认为它只获取 id 数字，我正在尝试发送 major_area 的值，但我没有知道如何解决它。
你的加载 gif 工作正常吗？您的 ajax 是否返回正确的 html？（要监控网络请求，您可以使用 firebug 或类似工具）。你认为错误可能发生在哪里？

标签： javascript php jquery drop-down-menu

【解决方案1】：

尝试做一个简单的AJAX函数：

<script type="text/javascript">
    function AjaxCall(ElemVal,PlaceId) {
            $.ajax({
                    url: "loadsubcat.php?parent_cat="+$(ElemVal).val(),
                    success: function(result) {
                            $("#"+ PlaceId).html(result);
                        }
                });
        }

        $(document).ready(function() {
            $("#parent_cat").change(function() {
                $("#sub-cat-load").html('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
                AjaxCall(this,'sub-cat-load');
            });
        });
</script>

sub_cat 容器

<label>Sub Category</label>
<!-- NOTICE THIS PART -->
<div id="sub-cat-load"></div>

loadsubcat.php

<?php 
include('config.php');
// You may want to sanitize this variable
$parent_cat = $_GET['parent_cat'];
$query      = mysql_query("SELECT city FROM zipcodes WHERE major_area = {$parent_cat}") or die(mysql_error()); ?>

<select name="sub_cat" id="sub_cat"><?php
while($row = mysql_fetch_array($query)) { ?>
    <option value="<?php echo $row[city]; ?>"><?php echo $row[city]; ?></option><?php 
    } ?>
</select>

【讨论】：