我有一个MySQL数据库,其中包含2个表。一个是events
表,其中包含事件名称和其他详细信息。另一个是instance
表。此表将events
表链接到venue
表并添加日期,因此每一行都是链接事件的一个实例。
我正在制作一份活动预订表,供内部用于这些活动。我想允许通过下拉列表选择活动。因此,我用事件名称填充了一个下拉列表:
$qEvent = "SELECT event_name, event_id FROM events";
$rEvent = mysqli_query($dbc,$qEvent);
echo '<select>';
while ($row = mysqli_fetch_assoc($rEvent)) {
echo '<option value="'.$row['event_id'].'">'.$row['event_name'].'</option>';
}
echo '</select>';
我现在要做的是,对于选定的事件,获取与该事件关联的所有实例,并使用日期填充另一个下拉列表。
我可以用PHP做到这一点,还是我需要浸入Javascript?我想我只需要一些方法来获取下拉选择的event_id值,然后基于此进行查询,但我不知道没有 Javascript 怎么办。
你应该看看Javascript或jQuery来实现你的目标。我根据我之前向您提出的问题使用了jQuery。它也更简单,代码更少。
您的 PHP:
将 ID 属性event_menu
添加到选择菜单
echo '<select id="event_menu">';
while ($row = mysqli_fetch_assoc($rEvent)) {
echo '<option value="'.$row['event_id'].'">'.$row['event_name'].'</option>';
}
echo '</select>';
<div id="container_for_new_menu"></div>
使用 jQuery:
$('#event_menu').on('change', function() {
// get selected value and build data string for AJAX
var event_selected = "event_selected="+$(this).val();
// send the selected data to a PHP page to build the populated menu
$.ajax({
url : 'populate-menu.php',
type: 'POST',
data : event_selected,
dataType : 'html',
success : function(data) {
$('#container_for_new_menu').html(data);
}, error : function() {
alert("Something went wrong!");
}
});
});
在填充菜单.php上,有类似以下内容:
$event_selected = isset($_POST['event_selected']) ? $_POST['event_selected'] : null;
// do SQL query here based on user's selection
// making sure you validate the data in the POST request for malicious BS
// or use parameterized queries
// then build a new menu to send back
echo '<select>';
// loop through results and build options
echo '</select>';
然后,此新菜单将回发到原始页面的 container_for_new_menu
元素中。
从外观上看,您希望根据用户在"事件"下拉列表中所做的选择来填充"实例"下拉列表。没有Javascript,你就无法做到这一点。
我建议的方法是使用 AJAX 提取实例数据,并在更改"事件"下拉列表时填充"实例"下拉列表。下面有用的资源用于简单的AJAX获取jQuery:
http://api.jquery.com/jQuery.get/
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
你需要某种Javascript来实现这一点。也:基本 - 在选择时提交表单,让 php 填充实例下拉列表。更优雅 - 使用 Javascript 对 select 进行 Ajax 调用,这将动态替换实例下拉列表的div。
您将需要JavaScript来填充第二个下拉框。我建议您将所有值加载到页面上的JSON中,然后您可以使用jQuery on change事件来填充第二个选择框。