动态下拉框

Question

我正在尝试创建3个相互依赖的下拉框。每个下拉框都从自己的表中获取数据。有3个表，如下图所示：

​

​

​

​

​

​

这是表单：

<label for="tourtype">
  Tour Type 
</label>
<select id="tourtype" name="tourtype" required>

  <option value="" selected="selected">
    --Select--
  </option>
  <?php
       $sql=mysql_query("Select tour_type_id,tour_name from tour_type");
       while($row=mysql_fetch_array($sql))
       {
           $tour_type_id=$row['tour_type_id'];
           $name=$row['tour_name'];
           echo "<option value='$tour_type_id'>$name</option>";
       }
  ?>
</select>

<label>
  Country
</label>
<select id="country" name="country" class="country" required>
  <option value="" selected="selected">
    -- Select --
  </option>

</select>

<
<label>
  Destination
</label>
<select id="destination" name="destination" class="destination" required>

  <option value="" selected="selected">
    -- Select --
  </option>
</select>

这是javascript：

<script type="text/javascript">
    $('#tour_type').change(function () {
        var id = $(this).val();
        $.ajax({
                type: "POST",
                url: "ajax.php",
                data: "&id=" + id + "&get_countries=1",
                success: function (html) {
                    $("#country").html(html);
                }
            });
    });

    $('#country').change(function () {
        var id = $(this).val();
        $.ajax({
                type: "POST",
                url: "ajax.php",
                data: "&id=" + id + "&get_destination=1",
                success: function (html) {
                    $("#destination").html(html);
                }
            });
    });
</script>

这是ajax.php

<?php
include ('../config.php');
< ? php
if ($_REQUEST['get_countries']) {
    $sql = mysql_query("SELECT * FROM `countries`  where `tour_type_id`=" . $_REQUEST['id']);
    $countries = "";
    while ($row = mysql_fetch_array($sql)) {
        $cid = $row['countries_id'];
        $name = $row['countries_name'];
        $countries.= "<option value='" . $cid . "'>" . $name . "</option>";
    }

    echo $countries;
}
elseif ($_REQUEST['get_destination']) {
    $destination = "";
    $sql = mysql_query("SELECT * FROM `destination`  where `country_id`   =" . $_REQUEST['id'])
    while ($row = mysql_fetch_array($sql)) {
        $destination_id = $row['destination_id'];
        $name = $row['destination_name'];
        $destination.= "<option value='" . $destination_id . "'>" . $name . "</option>";
    }

    echo $destination;
}

?>

问题是第二个和第三个下拉框没有填充任何内容。有谁可以帮我？例如，如果我在第一个下拉列表中选择“区域性”，第二个下拉列表应该显示荷兰和比利时。然后，如果我选择Holland，第三个下拉列表应该显示阿姆斯特丹。

Answer 1

当你的id是#tourtype时，你在Javascript中的标识符是#tour_type。

如果语法正确，并且您的SQL结果也是正确的，那么它应该可以工作。

编辑:您的某些JS不正确。

data: "&id=" + id + "&get_countries=1",

应该是

data: {id: id, get_countries: 1},

还应该对ajax调用进行调试，方法是添加

error: function () { alert("ajax failed"); }

成功后回调

完整的源代码现在：

$('#tourtype').change(function() {
    var id=$(this).val();
    $.ajax
    ({
        type: "POST",
        url:"jurassicbase5/admin/ajax.php",
        data: {id: id, get_countries: 1},
        success: function(html){
        $("#country").empty();
        $("#country").append(html);
        },
        error: function () { alert("ajax failed"); }

    });
});

$('#country').change(function() {
    var id=$(this).val();
    $.ajax
    ({
        type: "POST",
        url: "jurassicbase5/admin/ajax.php",
        data: {id: id, get_destination: 1},
        success: function(html)
        {
            $("#destination").empty();
            $("#destination").append(html);
        },
        error: function () { alert("ajax failed"); }
    });
});