刷新动态下拉选项

时间:2013-06-06 10:10:42

标签: php jquery

选中时,我有3个下拉框相互依赖。对于例如如果我从下拉列表中选择一个类型,那么下拉列表2仅填充与我从第一个下拉框中选择的内容相关的选项。第三次下拉可靠第二次下拉选项。

我面临的问题是,当我想选择不同的东西时,下拉框中的选项不会令人耳目一新。

任何人都可以帮助我吗?

这是我的表格:

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

这是表格底部的js:

<script>
    $('#tourtype').change(function () {
        var id = $(this).val();
        $.ajax({
                type: "POST",
                url: "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: "ajax.php",
                data: {
                    id: id,
                    get_destination: 1
                },
                success: function (html) {
                    $("#destination").empty();
                    $("#destination").append(html);
                },
                error: function () {
                    alert("ajax failed");
                }
            });
    });
</script>

最后这是ajax.php

<?php
include('../config.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;
}
?>

1 个答案:

答案 0 :(得分:0)

我已经解决了这个问题。只需将更多数据添加到我的查询从

获取数据的3个单独的表中