Question

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

这是我的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>";
}
?>

请检查我的代码，并告诉我我做错了什么。它不会加载第二次下降。

Answer 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>

相关下拉列表无法正常工作，第二次下拉列表未加载

1 个答案: