Question

我正在尝试在三个输入字段上创建一个依赖动态下拉框。目前，每个输入字段都是从名为tour_type，countries和destination的各个表中获取数据。这是形式：

    <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，国家和目的地：

enter image description here

任何人都可以帮我这个吗？如何让每个下拉框彼此可靠？对于例如如果我选择第一次下降的文化，那么只有荷兰和比利时应该在第二次下降。所以现在如果我从第二次下拉中选择荷兰，那么阿姆斯特丹应该在第三次下降中显示。

这是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前端表单的样子。我仍然无法选择第二个和第三个下拉框：

enter image description here

Answer 1

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

你可以使用ajax到这里，可以使用像

这样的速记版本

$.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

Answer 2

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

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

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

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

Answer 3

在这里，您需要从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;
}

?>

希望它运作良好

Answer 4

<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

创建动态下拉框

4 个答案: