使用jQuery,PHP和Ajax的动态依赖选择框

时间:2017-04-15 02:52:24

标签: javascript php jquery

我尝试创建两个选择框,分别是制造商,类型和依赖于另一个的选择。问题是第二个选择框没有显示

Manufacturer table
|   manuf_id*   |   manuf_name   |
|--------------------------------|
|       1       |     Bandai     |
|       2       |   Kotobukiya   |
|--------------------------------|

Type table
|   id*   |    type    | manuf_id** |
|-----------------------------------|
|    1    |   Gundam   |      1     |
|    2    | PVC Figure |      1     |
|    3    | PVC Figure |      2     |
|-----------------------------------|

add_product.php

<?php 
    $stmt = $db->prepare("SELECT * FROM manufacturer");
    $stmt->execute();
    $rowCount = $stmt->rowCount();
?>
    <select class="ui fluid dropdown" name="manufacturer" id="manufacturer">
        <option value="">Select Manufacturer</option>
        <?php
            if($rowCount > 0){
                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        ?>
            <option value="<?php echo $row['manuf_id'] ?>"><?php echo $row['manuf_name'] ?></option>
        <?php
                }
            } else {
        ?>
            <option value="">Manufacturer Not Available</option>
        <?php
            }
        ?>
    </select>

<select class="ui fluid dropdown" name="type" id="type"></select>

$(document).ready(function() {
    $('#manufacturer').change(function() {
        var manufID = $('#manufacturer').val();
        $.ajax({
            type:"GET",
            url:"ajaxData.php?",
            data:"manuf_id="+manufID,
            success:function(data){
                $("#type").html(data);
            }
        });
    });
});

ajaxData.php

<?php
include '../config/config.php';

$query = $db->prepare("SELECT * FROM type WHERE manuf_id = ".$_GET['manuf_id']."");
    $query->execute();

    $rowCount = $query->rowCount();

    if($rowCount > 0) {
        echo '<option value="5">Select type</option>';
        while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
            echo '<option value="'.$row['id'].'">'.$row['type'].'</option>';
        }
    }

&GT;

我无法弄清楚为什么它不起作用,任何帮助都会受到赞赏。

0 个答案:

没有答案