我对脚本非常陌生，基本上我必须尝试在教练之旅项目上完成一个学校项目。这个想法是允许客户注册和预订旅游。
我遇到的问题是，我不知道如何创建一个动态下拉列表，其中预订表格将从mysql数据库中获取数据。
让我们举例说：
客户需要从第一个下拉列表中选择一个旅游选择，即（工业，文化，军事）。
选择游览后，下一个下拉列表应根据上述（游览）选项列出目的地，即（英国，法国，德国等）。
然后第三个列表应显示取决于上述（目的地）选择的开始日期。
下拉列表中的所有数据都应来自数据库。此外，当客户提交表单时，所有这些数据都应该进入数据库中的客户预订表。
我被告知javascript应该是答案，但我已经搜索了很多论坛并查看了他们都很困惑的教程。因此我来这里问！任何有关如何做到这一点的帮助非常感谢。日Thnx！
以下是我只知道如何执行此操作的代码：
<h2><center>PLEASE PLACE YOUR BOOKING</center></h2>
<form action="booking.php" method="post">
<table width="700 border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td width="210" height="45">Tour Type:</td><td>
<select name="tour_type">
<option value="Cultural">Cultural</option>
<option value="Industrial">Industrial</option>
<option value="Military">Military</option>
</select></td></tr>
<tr><td width="210" height="45">Duration:</td><td>
<select name="duration" >
<option value="1_Day">1_Day</option>
<option value="7_Days">7_Days</option>
<option value="14_Days">14_Days</option>
</select></td></tr>
<tr><td width="210" height="45">Destination:</td><td>
<select name="destination" >
<option value="England">England</option>
<option value="Wales">Wales</option>
<option value="Scotland">Scotland</option>
<option value="France">France</option>
<option value="Belgium">Belgium</option>
<option value="Germany">Germany</option>
</select></td></tr>
<tr><td width="210" height="45">No. of Passengers:</td><td>
<select name="no_of_passengers" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select></td></tr>
<tr><td width="210" height="45">Depature:</td><td>
<select name="departure" >
<option value="13 May 2013">13 May 2013</option>
<option value="28 May 2013">28 May 2013</option>
<option value="11 June 2013">11 June 2013</option>
<option value="26 June 2013">26 June 2013</option>
<option value="14 July 2013">14 July 2013</option>
<option value="27 July 2013">27 July 2013</option>
</select></td></tr>
<tr><td width="210" height="45"><input type="checkbox" name="accomodation"
value="YES"/>Accomodation</td></tr>
<tr><td width="210" height="45"><input type="checkbox" name="mailshot"
value="YES"/>Mailshot</td></tr>
<tr><td width="210" height="45"><input type="submit" name="submit" value="submit"></td></tr>
</table>
</form>
</html>
<?php
//When submit button is pressed.
if (isset($_POST['submit'])) {
//Include the server and database connection.
include('cn.php');
session_start();
//retrieve data input from booking form and make it equal to the variable ($)
$tour_type = $_POST['tour_type'];
$duration = $_POST['duration'];
$destination = $_POST['destination'];
$no_of_passengers = $_POST['no_of_passengers'];
$departure = $_POST['departure'];
// accomodation confirmation
if (isset($_POST['accomodation'] ))
{$accom = $_POST["accomodation"];
} else {
$accom = "NO";
}
// mailshot confirmation
if (isset($_POST['mailshot'] ))
{$mail = $_POST["mailshot"];
} else {
$mail = "NO";
}
$userUsername = $_SESSION['loggedInUser'];
// Build the SQL query to retreive the variables ($) and input the data into the database.
$sql = "INSERT INTO booking
(user_id,tour_type,duration,destination,no_of_passengers,departure,accomodation,mailshot)
VALUES ((SELECT user_id FROM user WHERE user_username = '" .
$userUsername . "'),'$tour_type','$duration','$destination',
'$no_of_passengers','$departure','$accom' ,'$mail')";
// test the sql statement.
if(!mysql_query($sql,$cn)) {
die(mysql_error($cn));
}
// direct to this page when booking is successful.
header('Location: booking_success.php');
}
?>
答案 0 :(得分：2)
我有类似的问题。我找到了一个实际工作的指南，并在那里解释了他的所作所为。在阅读它时你应该记住的一件事是，它使用的是不同版本的Jquery而不是最新的版本，因此语法上有一些差异。这些差异虽然很小，但可以在评论中找到。
http://www.ssdtutorials.com/tutorials/series/dependable-dropdown.html
在你的情况下，它看起来像这样：
创建三个名为id（Integer）的表，一个名为master_id（Integer），另一个名为names（varchar）。
ID 将从1＆gt; x开始（意味着最后一行是数字x）。 对于第一个下拉军队中的项目， master_id 将为0。您想要进入军事类别的所有项目将具有与军事类别相同的master_id值作为id，例如1.您遵循此主体以及所有子类别和日期。 名称只是一个标签......
Html看起来像这样，你把脚本放在你网站头部的php中。
?php
try {
$objDb = new PDO('mysql:host=localhost;dbname=tour', 'root', 'root');
$objDb->exec('SET CHARACTER SET utf8');
$sql = "SELECT *
FROM `region`
WHERE `master_id` = 0";
$statement = $objDb->query($sql);
$list = $statement->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
echo 'There was a problem';
}
?>
这是表格。
<select name="tour" id="tour" class="update">
<option value="">Select one</option>
<?php if (!empty($list)) { ?>
<?php foreach($list as $row) { ?>
<option value="<?php echo $row['id']; ?>">
<?php echo $row['name']; ?>
</option>
<?php } ?>
<?php } ?>
</select>
<select name="location" id="location" class="update"
disabled="disabled">
<option value="">----</option>
</select>
<select name="date" id="date" class="update"
disabled="disabled">
<option value="">----</option>
</select>
</form>
请记住将jquery和corect路径添加到ajax脚本。
<?php
if (!empty($_GET['id']) && !empty($_GET['value'])) {
$id = $_GET['id'];
$value = $_GET['value'];
try {
$objDb = new PDO('mysql:host=localhost;dbname=tour', 'root', 'password');
$objDb->exec('SET CHARACTER SET utf8');
$sql = "SELECT *
FROM `categories`
WHERE `master` = ?";
$statement = $objDb->prepare($sql);
$statement->execute(array($value));
$list = $statement->fetchAll(PDO::FETCH_ASSOC);
if (!empty($list)) {
$out = array('<option value="">Select one</option>');
foreach($list as $row) {
$out[] = '<option value="'.$row['id'].'">'.$row['name'].'</option>';
}
echo json_encode(array('error' => false, 'list' => implode('', $out)));
} else {
echo json_encode(array('error' => true));
}
} catch(PDOException $e) {
echo json_encode(array('error' => true));
}
} else {
echo json_encode(array('error' => true));
}
var formObject = {
run : function(obj) {
if (obj.val() === '') {
obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
} else {
var id = obj.attr('id');
var v = obj.val();
jQuery.getJSON('func/tour_function.php', { id : id, value : v }, function(data) {
if (!data.error) {
obj.next('.update').html(data.list).removeAttr('disabled');
} else {
obj.nextAll('.update').html('<option value="">---- </option>').attr('disabled', true);
}
});
}
}
};
$(function() {
$('.update').on('change', function() {
formObject.run($(this));
});
});
请记住正确的路径并包含Jquery 1.9.1，它应该可以工作。
答案 1 :(得分：1)
要在本网站上指出答案 Ajax approach to populating a second dynamic dropdown based on the selection in the first
本质上，短版本是一个onchange事件，可以从服务器加载数据
<select name="first_dropdown" onchange="$('#dropdown2_container').load('your_script.php?nid='+this.value);">
<option....
</select>
...
<div id="dropdown2_container" style="display:none"> </div>
我不喜欢像这样突兀的javascript，但它是你的开始。如果您想要更优雅的东西，请尝试以下链接。
http://www.99points.info/2010/12/n-level-dynamic-loading-of-dropdowns-using-ajax-and-php/
至少有一点可以让你开始。
答案 2 :(得分：0)
您可以采取几种方法。由于您不熟悉脚本，我建议在此时避免使用AJAX。您需要以下内容：
在服务器端（PHP），将数据输出到可以使用的JavaScript变量中。例如，您可以将数据存储在数组中。
示例：var tours = [{ id:1, name:"Tour#1" }, { id:2, name:"Tour#2" }, etc.]
您需要将所有巡视数据，目标数据和开始日期加载到脚本中，并提供足够的信息来链接哪些子记录属于哪些父记录。
当用户更改下拉值（onchange事件）时，请根据上一下拉列表中的选择应用逻辑将条目加载到下一个下拉列表。
示例：<select id='tours' onchange='changetour();'></select>
您还需要处理用户清除选择的情况（在这种情况下清除所有子选项），或者用户返回第一个下拉菜单并在他们'之后更改他们的选择已经选择了第二和第三的东西。
这应该让您大致了解一个入门算法。我建议您尽力投入上述每个项目，并在尝试编写解决方案并遇到特定问题后再回答具体问题。