0

我正在尝试在三个输入字段上创建一个相关的动态下拉框。目前，每个输入字段都从名为 tour_type、国家和目的地的单独表中获取数据。这是表格：

    <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> 
    <?php 
    $sql=mysql_query("SELECT * FROM `countries`  where `tour_type_id` = ?"); //what should i put in here?
        while($row=mysql_fetch_array($sql))
        {
          $cid=$row['countries_id'];
          $name=$row['countries_name'];

          echo "<option value='$cid'>".$name."</option>";
        }
        ?>
        </select>


    <label>Destination </label>
    <select id="destination" name="destination" class="destination" required> 
        <option value="" selected="selected">-- Select --</option>
    <?php 
    $sql=mysql_query("SELECT * FROM `destination`  where `countries_id` = ?");//what should i put in here?


        while($row=mysql_fetch_array($sql))
        {
          $destination_id=$row['destination_id'];
          $name=$row['destination_name'];

          echo "<option value='$destination_id'>".$name."</option>";
        }
        ?>

    </select>

这是表单顶部的 javascript

<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;

$.ajax
({
type: "POST",
url: "ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$(".destination").html(html);
} 
});

});
});
</script>

最后这些是 3 个表，即分别为 tour_type、国家和目的地：

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

谁可以帮我这个事？如何使每个下拉框相互依赖？例如，如果我在第一个下拉菜单中选择文化，那么只有荷兰和比利时应该显示在第二个下拉菜单中。所以现在如果我从第二个下拉列表中选择荷兰，那么阿姆斯特丹应该显示在第三个下拉列表中。

这是 ajax.php，我不太确定它是否正确。

<?php
include('../config.php');
if($_POST['']) //what should i put in here?
{
$id=$_POST['']; //what should i put in here?
$sql=mysql_query //this is where i do not know what to put;

while($row=mysql_fetch_array($sql))
{
//And what should i be placing here

}
}

?>

这是实现dianuj提供的代码后web前端表单的样子。我仍然无法选择第二个和第三个下拉框：

在此处输入图像描述

4

4 回答 4

2

所以首先你有旅游类型选择框。因此，只需将根据旅游类型获取国家/地区的代码移动到 ajax.php。还包括一个参数来区分您发布的类型（旅游类型、国家等）。因此您将获得 id 并根据您可以从不同表中获取的类型参数。然后创建一个选择框 HTML 片段并输出它。这将返回 AJAX 调用，您可以插入 HTML。

您可以使用 ajax get here 并可以使用速记版本，例如

$.get('ajax,php?id=idhere&type=country', function(data) {
    $('#country_result').html(data);
});

其中 result 是必须插入选择框的 div 的 id。

所以 HTML 部分就像

<div id="country_result"></div> //Country select box goes here
<div id="destination_result"></div> //Country select box goes here
于 2013-06-05T12:07:46.883 回答
1

在这里，您必须从ajax.php不要将查询放在第二个下拉列表中获取选项

<label>Tour Type </label>
<select id="tourtype" name="tourtype" required> 
<option value="" >--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="">-- Select --</option>    
    </select>


<label>Destination </label>
<select id="destination" name="destination" class="destination" required> 
    <option value="">-- Select --</option>    

</select>

最初国家和目的地下拉列表应该是空的，你的js去

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


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

和你的ajax.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;
}

?>

希望它工作正常

于 2013-06-05T12:08:51.180 回答
1

最简单的方法是在选择更改时从服务器获取选择选项，如下所示：

$('#tour_type').change(function() {
  // load country options
});

$('#country').change(function() {
  // load destination options
});

服务器应该简单地返回一个 HTML 片段，其中包含国家和目的地的可用选项。

于 2013-06-05T11:45:53.280 回答
0 
<label>Tour Type </label>
<select id="tourtype" name="tourtype" required onchange="get_country($(this).val())"> 
<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 onchange="get_destination($(this).val())">
<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>


 <script>

            function get_country(tour_type)
            {       
                    $.post("ajax.php",{get_country:tour_type},function(data){

                        var data_array = data.split(";");
                        var number_of_name = data_array.length-1;
                        var value;
                        var text;
                        var opt;
                        var temp_array;
                        for(var i=0; i<number_of_name; i++)
                        {
                            value=temp_array[i];
                            //alert(value);
                            text=temp_array[i];
                            opt = new Option(text,value);
                            $('#country').append(opt);
                            $(opt).text(text);
                        }
                        $("#country").prop("disabled", false);
                    });
            }


  //same way script for getting destination

  </script>



        // now in ajax file


                    if(isset($_POST["get_country"]))
                {
                    $tour_type = str_replace("'","",stripslashes(htmlentities(strip_tags($_POST["get_country"]))));
                    $country_select = mysql_query("select * from country where tour_type_id = '$tour_type'");
                    $country="";
                    while($country_row = mysql_fetch_array($country_select))
                    {
                        $country = $country.$country_row["country"].";";
                    }
                    echo $country;
                }


         // same way ajax for destination
于 2013-06-05T12:12:29.403 回答