我是AJAX和JQuery的新手，所以我在这方面遇到了困难。我目前有一个下拉框，它是从数据库中填充的。显示了三个值，它们来自三个不同的数据库表。下一个下拉框应该取决于从上一个下拉列表中选择的内容。如果选择了其中一个值，它应该显示该特定表中的ID。这是我迄今为止的代码：
HTML&PHP:
<div class="activity">
<form action="" id="activity" name="activity" method="GET">
<table class="table" id="activity">
</br>
<p><b> Create an Activity: </b></p>
<tr>
<td><input type="text" name="activity_name" id="activity_name" placeholder="Activity Name" class=""/> </td>
</tr>
<tbody id="activityTable">
<tr id="copyRow">
<td><input type="text" name="day" id="day" placeholder="Day" class=""/></td>
<td>Activity Type: <?php
$sql = "SELECT activity_type as activity_type FROM activity1 UNION SELECT activity_type as activity_type FROM activity2 UNION SELECT activity_type as activity_type FROM activity3";
$result = mysql_query($sql);
echo "<select name='activity_type'>";
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row['activity_type'] ."'>" . $row['actitivy_type'] ."</option>";
}
echo "</select>";
?>
</td>
<td>Activities(s): <select name="activities" size="2" multiple="multiple" style="width:70px">
<option> </option>
</select>
</td>
<td><input type="button" id="deletebutton" name="delete" value="Delete" class="btn btn-default navbar-btn" onclick="deleteRow(this)"/></td>
</tr>
</table>
<div class="addbutton">
<input type="button" name="add" value="+" class="btn btn-default navbar-btn" onclick="addRow('activity')">
</div>
</form>
<div class="button">
JavaScript:
<script type="text/javascript">
function addRow() {
var row = document.getElementById("copyRow"); // find row to copy
var table = document.getElementById("activityTable"); // find table to append to
var clone = row.cloneNode(true); // copy children too
table.appendChild(clone); // add new row to end of table
}
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
如果您正在执行jQuery（尽管我在您的代码示例中没有看到任何使用），您将使用on():
<select class="dynamic" name="activity_type">
<option value="">Select</option>
<option value="one">Activity One</option>
<option value="two">Activity Two</option>
<option value="three">Activity Three</option>
</select>
<script>
$(document).ready(function() {
$(this).on('change','.dynamic',function(){
var useData = {};
useData[$(this).attr('name')] = $(this).val();
$.ajax({
url: '/processing_page.php',
type: 'post',
data: useData,
success: function(response) {
/*
Do whatever code you want here and drop it where ever.
You could choose to just have your php page generate the
html and you just drop it somewhere:
$('#spot').html(response);
or just send/receive/parse JSON and generate the html
with javascript.
*/
}
});
});
});
</script>