0

2 つのドロップダウン メニューを設定しようとしています。1 つは「コース」用で、もう 1 つは選択したコースに関連する「モジュール」用です。

「コース」ドロップダウンメニューが正常に機能するようになりました。問題は、「モジュール」ドロップダウン メニューです。「コース」ドロップダウンメニューからコースを選択すると、選択したコースに関連するモジュールが「モジュール」ドロップダウンメニューに表示されます。しかし、代わりに、「モジュール」ドロップダウンメニューの「選択してください」オプションのみが表示されています。

関連するモジュールを「モジュール」ドロップダウン メニューに表示するにはどうすればよいですか?

以下は、「コース」ドロップダウンメニューと「モジュール」ドロップダウンメニューのセットアップを表示するコードです。関連するものを見つけてリストする「module.php」ファイルにリンクするjqueryが含まれています「モジュール」ドロップダウンメニューのオプションとしてモジュール。

<?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(); 


?>
4

1 に答える 1

0

モジュール ドロップを 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>";
于 2012-10-26T01:22:02.527 に答える