以下にphp/mysqliとjqueryのコードがあり、コースのドロップダウンメニューとモジュールのドロップダウンメニューが表示されます。
$courseactive = 1;
$sql = "SELECT CourseId, CourseNo, CourseName FROM Course WHERE CourseActive = ? ORDER BY CourseNo";
$sqlstmt=$mysqli->prepare($sql);
$sqlstmt->bind_param("i",$courseactive);
$sqlstmt->execute();
$sqlstmt->bind_result($dbCourseId, $dbCourseNo, $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;
$outputcourse = "";
while($sqlstmt->fetch())
{
$course = $dbCourseId;
$courseno = $dbCourseNo;
$coursename = $dbCourseName;
$courseHTML .= "<option value='".$course."'>" . $courseno . " - " . $coursename . "</option>".PHP_EOL;
if (isset($_POST['courses']) && ($_POST['courses'] == $course)) {
$outputcourse = "<p><strong>Course:</strong> " . $courseno . " - " . $coursename . "</p>";
}
}
$courseHTML .= '</select>';
$moduleHTML = "";
$moduleHTML .= '<select name="modules" id="modulesDrop">'.PHP_EOL;
$moduleHTML .= '<option value="">Please Select</option>'.PHP_EOL;
$moduleHTML .= '</select>';
$pHTML = "";
?>
<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ページに移動し、そのスクリプトでクエリを実行して、そのコースに属するモジュールを出力します。このページのモジュールドロップダウンメニュー。
でも今は、コースのドロップダウンメニューは本当に必要ないので、含めないことを考えています。だから私はモジュールのドロップダウンメニューしか持っていません。ただし、module.phpスクリプトに移動してモジュールオプションを表示することにより、モジュールを表示したいのですが。
だから私の質問は、上記のスクリプトを開くとすぐにjqueryを実行し、ドロップダウンメニューにモジュールのリストを表示するようにjqueryコードを変更する必要があるということです(コースドロップに依存することはありません)ドロップダウンメニューが削除されるので、ダウンメニュー)?
jqueryはdocument.ready()関数に入る必要があると思いますか?
アップデート:
<script type="text/javascript">
$(document).ready( function(){
function getModules() {
jQuery.ajax({
type: "post",
url: "module.php",
success: function(response){
jQuery('#modulesDrop').append(response);
}
});
});
}
</script>
module.phpページ:
`
// connect to the database
include('connect.php');
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
die();
}
$moduleactive = 1;
$sql = "SELECT ModuleId, ModuleNo, ModuleName FROM Module WHERE ModuleActive = ? ORDER BY ModuleNo";
$sqlstmt=$mysqli->prepare($sql);
$sqlstmt->bind_param("i", $moduleactive);
$sqlstmt->execute();
$sqlstmt->bind_result($dbModuleId,$dbModuleNo,$dbModuleName);
$moduleHTML = "";
while($sqlstmt->fetch()) {
$moduleHTML .= sprintf('<option value="%1$s_%2$s_%3$s">%1$s - %2$s</option>'.PHP_EOL, $dbModuleNo, $dbModuleName, $dbModuleId);
}
echo $moduleHTML;
$sqlstmt->execute();
?>`