Question

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

enter image description here

这是表格：

<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;
}

?>

问题是第二个和第三个下拉框没有填充任何内容。谁能帮我？例如，如果我在第一次下拉菜单中选择文化，第二次下拉菜单应显示荷兰和比利时。然后，如果我选择荷兰，第三次下降应该显示阿姆斯特丹。

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"); }
    });
});

动态下拉框

1 个答案: