它不顯示下拉菜單中的相關模塊

Question

我想設置2個下拉菜單，一個用於「課程」，另一個用於選擇課程的相關「模塊」。

現在「課程」下拉菜單正常工作。問題是「模塊」下拉菜單。如果我從「課程」下拉菜單中選擇課程，則應在「模塊」下拉菜單中顯示與所選課程相關的模塊。但相反，它僅顯示「模塊」下拉菜單中的「請選擇」選項，沒有別的。

如何讓相關模塊出現在「模塊」下拉菜單中？

下面是代碼顯示「課程」下拉菜單和「模塊」下拉菜單的設置，它包含一個jQuery的鏈接到「module.php」文件，它會發現並在「模塊」下拉菜單中將相關模塊列爲選項。

<?php 

// connect to the database 
include('connect.php'); 

/* check connection */ 
if (mysqli_connect_errno()) { 
printf("Connect failed: %s\n", mysqli_connect_error()); 
die(); 
} 

$sql = "SELECT CourseId, CourseName FROM Course"; 

$sqlstmt=$mysqli->prepare($sql); 

$sqlstmt->execute(); 

$sqlstmt->bind_result($dbCourseId, $dbCourseName); 

$courses = array(); // easier if you don't use generic names for data 

$courseHTML = ""; 
$courseHTML .= '<select name="courses" id="coursesDrop" onchange="getModules();">'.PHP_EOL; 
$courseHTML .= '<option value="">Please Select</option>'.PHP_EOL; 

while($sqlstmt->fetch()) 
{ 
$course = $dbCourseId; 
$coursename = $dbCourseName; 
$courseHTML .= "<option value='".$course."'>" . $course . " - " . $coursename . "</option>".PHP_EOL; 
} 

$courseHTML .= '</select>'; 
$courseHTML .= '</form>'; 

$moduleHTML = ""; 
$moduleHTML .= '<select name="modules" id="modulesDrop">'.PHP_EOL; 
$moduleHTML .= '<option value="">Please Select</option>'.PHP_EOL; 
$moduleHTML .= '</select>'; 


?> 

<script type="text/javascript"> 

function getModules() { 
var course = jQuery("#CoursesDrop").val(); 
jQuery('#modulesDrop').empty(); 
jQuery('#modulesDrop').html('<option value="">Please Select</option>'); 
jQuery.ajax({ 
type: "post", 
url: "module.php", 
data: { course:course }, 
success: function(response){ 
jQuery('#modulesDrop').append(response); 
} 
}); 


} 

</script> 

下面是module.php頁：

<?php 

    // connect to the database 
include('connect.php'); 

/* check connection */ 
if (mysqli_connect_errno()) { 
printf("Connect failed: %s\n", mysqli_connect_error()); 
die(); 
} 


$course = isset($_POST['course']) ? $_POST['course'] : ''; 

$sql = " 
SELECT cm.CourseId, cm.ModuleId, 
c.CourseName, 
m.ModuleName 
FROM Course c 
INNER JOIN Course_Module cm ON c.CourseId = cm.CourseId 
JOIN Module m ON cm.ModuleId = m.ModuleId 
WHERE 
(c.CourseId = ?) 
ORDER BY c.CourseName, m.ModuleId 
"; 

$sqlstmt=$mysqli->prepare($sql); 

$sqlstmt->bind_param("s",$course); 

$sqlstmt->execute(); 

$sqlstmt->bind_result($dbCourseId,$dbModuleId,$dbCourseName,$dbModuleName); 


$moduleHTML = ""; 

while($sqlstmt->fetch()) { 
    $moduleHTML .= "<option value='$dbModuleId'>" . $dbModuleId . "</option>".PHP_EOL; 
} 


echo $moduleHTML; 

$sqlstmt->execute(); 


?> 

Answer 1

放入一個div模塊下降和繪製SELECT標籤以及

並且可以更好地做到這一切的一個jquery 「負荷」

$moduleHTML .= '<div id="modulesDrop">'; 
$moduleHTML .= '<select name="modules" >'.PHP_EOL; 
$moduleHTML .= '<option value="">Please Select</option>'.PHP_EOL; 
$moduleHTML .= '</select>'; 
$moduleHTML .= '</div>'; 

和

$moduleHTML .= "<select >"; 
while($sqlstmt->fetch()) { 
    $moduleHTML .= "<option value='$dbModuleId'>" . $dbModuleId . "</option>".PHP_EOL; 
} 
$moduleHTML .= "</select>";