我创建这段代码是为了简单地展示每一章中特定问题的解决方案。当我第一次更改章节时，会显示解决方案（post.php文件中的数据）。然而，当我再次更改章节时，它不会显示新的解决方案，即使我可以在"console.log"中看到新的解决方法
这是我的代码：
<!doctype html>
<html>
<head>
<style>
.chapter_list
{
position: absolute;
left: 100px;
top: 80%;
}
.question_list
{
position: absolute;
left: 300px;;
top: 80%;
}
</style>
<link rel="stylesheet" type="text/css" href="index.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery-1.12.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".chapter_list").change(function()
{
var chapter=$(this).val();
$.ajax
({
type: "POST",
url: "get_question_list.php",
data: 'chapter='+chapter,
cache: false,
success: function(html)
{
$(".question_list").html(html);
}
});
});
});
function show_question()
{
var chapter = document.getElementById("select_chapter");
var selected_chapter = chapter.options[chapter.selectedIndex].value;
//console.log(selected_chapter);
var question = document.getElementById("select_question");
if(question.options[question.selectedIndex].value)
{
var selected_question = question.options[question.selectedIndex].value;
//console.log(selected_question);
$.post('post.php',{selected_chapter:selected_chapter, selected_question:selected_question}).success(
function(data)
{
console.log(data);
$('#display_solution').html(data);
//alert(data);
});
}
}
</script>
</head>
<body >
<label>Chapter</label>
<select name="chapter_list" class="chapter_list" id="select_chapter" onChange="show_question();">
<option value="asd" selected="selected">-- Select Chapter --</option>
<?php
$connect=mysql_connect("localhost","root","");
mysql_select_db("books_for_solutions");
$sql=mysql_query("SELECT DISTINCT chapter FROM math151");
while ($row=mysql_fetch_array($sql))
{
?>
<option value="<?php echo $row['chapter']; ?>"><?php echo $row['chapter']; ?></option>
<?php
}
?>
</select>
<label>Question</label>
<select name="question_list" class="question_list" id="select_question" >
<option value="a" selected="selected">-- Select Question --</option>
</select>
<div id="display_solution"></div>
</body >
</html>
这是我的post.php文件
<?php
include index.php;
$chapter = $_POST['selected_chapter'];
$question = $_POST['selected_question'];
$connect=mysql_connect("localhost","root","");
mysql_select_db("solutions");
$sql=mysql_query("SELECT * FROM solutions WHERE chapter='$chapter' AND question='$question'");
$row=mysql_fetch_assoc($sql);
$dbloc_question=$row['location_question'];
$dbloc_solution=$row['location_solution'];
if ($chapter=="chapter1")
{
$display= "solution from chapter1";
}
else
{
$display= "solution from chapter2";
}
echo "<p>$display</p>";
?>
1）如注释中所述，混合使用onchange标记和jQuery .on()处理程序（通过.change()）。这可能会导致功能错误。
2） 您包含了jQuery的3个（不同）版本，这也不好。
3） 您使用$.post（）.success（），它已被弃用，请参阅文档弃用说明
4） 请注意，同一事物的变量名不同，并且没有"严格使用"会导致使用错误的变量名（html与data），但这里没有问题。
5） 另一个注意事项，至少是我的观点：您混合了jQuery调用和本地javascript调用。毫无疑问，本机调用更快，但混合并不能产生干净的代码。
<!doctype html>
<html>
<head>
<style>
.chapter_list {
position: absolute;
left: 100px;
top: 80%;
}
.question_list {
position: absolute;
left: 300px;;
top: 80%;
}
</style>
<link rel="stylesheet" type="text/css" href="index.css"/>
<!-- Choose, only use one jQuery at at time -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<!-- <script type="text/javascript" src="jquery-1.4.1.min.js"></script> -->
<script type="text/javascript" src="jquery-1.12.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".chapter_list").change(function () {
var chapter=$(this).val();
console.log('Fire ajax get_question_list.php');
$.ajax ({
type: "POST",
url: "get_question_list.php",
data: 'chapter='+chapter,
cache: false,
success: function(html) {
console.log('Result from get_question_list: ', html);
$(".question_list").html(html);
}
});
});
// Add event handler to .chapter_list and .question_list
// If this is fired twice (after the first ajax to get_question_list) remove .chapter_list here
$(".chapter_list,.question_list").change(function () {
show_question();
});
});
function show_question() {
var chapter = document.getElementById("select_chapter");
var selected_chapter = chapter.options[chapter.selectedIndex].value;
console.log("Selected chapter: ", selected_chapter);
var question = document.getElementById("select_question"),
selected_question = $(question).val();
console.log("Selected question: ", selected_question);
if(selected_question) {
console.log("Try to load solution for question ", question_value)
// Here was the closing bracket wrong
//old: $.post('post.php',{selected_chapter:selected_chapter, selected_question:selected_question}).success(
$.post('post.php', {selected_chapter:selected_chapter, selected_question:selected_question}, function(data) {
console.log('Result from post.php: ', data);
$('#display_solution').html(data);
//alert(data);
});
}
}
</script>
</head>
<body>
<label>Chapter</label>
<select name="chapter_list" class="chapter_list" id="select_chapter"><!-- Removed onChange -->
<option value="asd" selected="selected">-- Select Chapter --</option>
<?php
$connect=mysql_connect("localhost","root","");
mysql_select_db("books_for_solutions");
$sql=mysql_query("SELECT DISTINCT chapter FROM math151");
while ($row=mysql_fetch_array($sql)) {
?>
<option value="<?php echo $row['chapter']; ?>"><?php echo $row['chapter']; ?></option>
<?php
}
?>
</select>
<label>Question</label>
<select name="question_list" class="question_list" id="select_question">
<option value="a" selected="selected">-- Select Question --</option>
</select>
<div id="display_solution"></div>
</body >
</html>