weixin_33717298 2013-06-05 11:35 采纳率: 0%
浏览 24

创建动态下拉框

I am trying to create a dependent dynamic drop down box on three input fields. At the moment the each input field is getting their data from their individual tables called tour_type, countries and destination. This is the form:

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

This is the javascript at the top of the form

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

Finally these are the 3 tables i.e. tour_type, countries and destination respectively:

enter image description here

enter image description here

enter image description here

Can anyone help me on this? How do I make each drop down box dependable on each other? For e.g. If i select Culture on the 1st drop down, then only Holland and Belgium should show in the 2nd drop down. So now if i select Holland from 2nd drop down, then Amsterdam should show in the 3rd drop down.

This is the ajax.php which i am not too sure if it is right.

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

}
}

?>

This is what the web front end form looks like after implementing the code provided by dianuj. I still can not select the 2nd and 3rd drop down boxes:

enter image description here

  • 写回答

4条回答 默认 最新

  • 斗士狗 2013-06-05 11:45
    关注

    The simplest approach is to fetch select options from the server when the selections change, like so:

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

    The server should simply return a snippet of HTML containing the available options for country and destination.

    评论

报告相同问题?

悬赏问题

  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥15 state显示变量是字符串形式,但是仍然红色,无法引用,并显示类型不匹配
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波