动态下拉框 [英] Dynamic drop down box

问题描述

我想创建3个下拉框依赖于对方。每一个下拉框，从自己的表中获得的数据。有3所示的表

I am trying to create 3 drop down boxes dependent on each other. Each drop down box is getting its data from its own tables. There are 3 tables as shown:

这是格式：

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

This is the 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

And this is the 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;
}

?>

现在的问题是第二和第三个下拉框不填充任何内容。谁能帮助我？例如，如果我选择一号滴培养下，第二届下拉应该表现出荷兰和比利时。然后，如果我选择荷兰，第3个下拉应显示阿姆斯特丹。

The problem is the 2nd and 3rd drop down boxes are not populating anything. Can anyone help me? For example if i select culture on the 1st drop down, the 2nd drop down should show Holland and Belgium. Then if i select Holland, the 3rd drop down should show Amsterdam.

推荐答案

您在JavaScript标识符#tour_type当你的id是#tourtype。

Your identifier in your Javascript is #tour_type when your id is #tourtype.

如果语法是正确的，你的SQL结果是正确的也是如此，它应该工作。

If the syntax is correct and your SQL results are correct too, it should work.

编辑：你的一些JS是不正确的。

some of your JS isn't right.

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

应

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

您也应该把调试你的Ajax调用加入

You should also put a debug on your ajax call by adding

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

你的成功后回调

after your success callback

现在完全开放代码：

$('#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"); }
    });
});

这篇关于动态下拉框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！