生徒の詳細を編集できるスクリプトを作成しています。したがって、以下のコードでコンパイルされたドロップダウンメニューの学生のリストから学生を選択するとどうなりますか。
$studentInfo = array();
while ($studentqrystmt->fetch()) {
$studentHTML .= sprintf("<option value='%s'>%s</option>", $dbStudentId, $dbStudentUsername) . PHP_EOL;
$studentData = array();
$studentData["StudentId"] = $dbStudentId;
$studentData["StudentAlias"] = $dbStudentalias;
$studentData["StudentUsername"] = $dbStudentUsername;
$studentData["CourseId"] = $dbCourseId;
$studentData["CourseNo"] = $dbCourseNo;
$studentData["CourseName"] = $dbCourseName;
array_push($studentInfo, $studentData);
}
$studentHTML .= '</select>';
$studentForm = "
<form action='" . htmlentities($_SERVER['PHP_SELF']) . "' method='post' id='studentForm'>
<p>{$studentHTML}</p>
</form>
";
echo $studentForm;
以下は、ドロップダウンメニューの学生リストのソースコードです。
<form action='...editstudent.php' method='post' id='studentForm'>
<p><strong>Students:</strong> <select name="student" id="studentsDrop">
<option value="">Please Select</option>
<option value='38'>u0495333 - Jack smith</option>
<option value='1'>u0867587 - Mayur Patel</option>
<option value='36'>u0867588 - paul smith</option>
<option value='39'>u4838229 - Chris Tucker</option>
</select> </p>
<div id='targetdiv'></div>
</form>
ここで、ユーザーが選択されると、関連するテキスト入力のフォームに学生のすべての詳細が表示されます。
$(document).ready( function(){
var studentinfo = [{"StudentId":38,"StudentAlias":"u0495333","StudentForename":"Jack","StudentSurname":"smith","StudentUsername":"u0495333","StudentEmail":"u0495333@hud.ac.uk","StudentDOB":"07-12-2012","StudentYear":2,"CourseId":19,"CourseNo":"BIO234","CourseName":"Biology"},
{"StudentId":36,"StudentAlias":"u0867588","StudentForename":"paul","StudentSurname":"smith","StudentUsername":"u0867588","StudentEmail":"u0867588@hud.ac.uk","StudentDOB":"05-12-2012","StudentYear":2,"CourseId":2,"CourseNo":"INFO102","CourseName":"Bsc Computing"}];
$('#studentsDrop').change( function(){
var studentId = $(this).val();
if (studentId !== '') {
for (var i = 0, l = studentinfo.length; i < l; i++)
{
if (studentinfo[i].StudentId == studentId) {
var currentid = $('#currentStudentId').val(studentinfo[i].StudentId);
var currentusername = $('#currentStudentUsername').val(studentinfo[i].StudentUsername);
var currentcourse = $('#currentStudentCourse').val(studentinfo[i].CourseNo + " - " + studentinfo[i].CourseName);
var newid = $('#newStudentId').val(studentinfo[i].StudentId);
var newusername = $('#newStudentUsername').val(studentinfo[i].StudentUsername);
var newcourse = $('#newStudentCourse').val(studentinfo[i].CourseId);
var text = $(this).find('option:selected').text();
var split = text.split(' - ');
$('#currentStudentAlias').val( split[0] );
$('#newStudentAlias').val( split[0] );
break;
}
}
}
else{
$('#currentStudentAlias,#currentStudentUsername,#currentStudentCourse,#currentStudentId').val('');
$('#newStudentAlias,#newStudentUsername,#newStudentCourse,#newStudentId').val('');
}
});
});
以下は、各データが表示されると想定されるフォームです。
<form id='editForm'>
<p><strong>Current Student Details</strong></p>
<table>
<tr>
<th></th>
<td><input type='hidden' id='currentStudentId' name='StudentIdcurrent' value='' /> </td>
</tr>
<tr>
<th>Student Number:</th>
<td><input type='text' id='currentStudentAlias' name='StudentAliascurrent' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Username:</th>
<td><input type='text' id='currentStudentUsername' name='StudentUsernamecurrent' readonly='readonly' value='' /> </td>
</tr>
<th>Course:</th>
<td><input type='text' id='currentStudentCourse' name='StudentCoursecurrent' readonly='readonly' value=''/> </td>
</tr>
</table>
<div id='currentAlert'></div>
<p><strong>New Student Details</strong></p>
<table>
<tr>
<th></th>
<td><input type='hidden' id='newStudentId' name='StudentIdNew' value='' /> </td>
</tr>
<tr>
<th valign='top'>Student Number:</th>
<td valign='top'><input type='text' id='newStudentAlias' name='StudentAliasNew' readonly='readonly' value='' /> </td>
<div id='studentAliasAlert'></div>
</tr>
<tr>
<th valign='top'>Username:</th>
<td valign='top'><input type='text' id='newStudentUsername' name='StudentUsernameNew' readonly='readonly' value='' /> </td>
<div id='studentUsernameAlert'></div>
</tr>
<tr>
<th valign='top'>Course:</th>
<td id='datacourse' valign='top'><select name="courses" id="newStudentCourse">
<option value="">Please Select</option>
<option value='1'>INFO101 - Bsc Information Communication Technology</option>
<option value='2'>INFO102 - Bsc Computing</option>
<option value='8'>INFO103 - Business and Finance</option>
<option value='7'>INFO104 - English</option>
<option value='9'>INFO107 - Mathematics and Stats</option>
<option value='16'>INFO120 - Science</option>
</select>
<div id='studentCourseAlert'></div></td>
</tr>
</table>
</form>
上記のフォームに表示されているコースのリストを確認できます。
これで、jqueryですべてが機能し、次の行が期待されます。var newcourse = $('#newStudentCourse').val(studentinfo[i].CourseId);
上記の行で私がやろうとしているのは、学生が選択されると、コースのリストから下のコースドロップダウンメニューでユーザーが現在勉強しているコースが選択されるということです。問題は、学生を選択した後も、[コース]ドロップダウンメニューに[選択してください]オプションが表示され続けることです。
私の質問は、下のドロップダウンメニューのコースのリストから、学生が選択された後、コースドロップダウンメニューで学生のコースを選択するにはどうすればよいですか？