以下に、学生の現在のコースの詳細を保持するテキスト入力と、コースのリストで構成されるコースドロップダウンメニューで構成されるフォームがあります。
<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>
</select> </p>
<div id='targetdiv'></div>
</form>
<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>Course:</th>
<td><input type='text' id='currentStudentCourse' name='StudentCoursecurrent' readonly='readonly' value=''/> </td>
</tr>
</table>
<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'>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>
以下のコードを使用すると、テキスト入力にコース番号とコース名が表示され、ドロップダウンメニューのコースのリストからコースのIDを検索して学生のコースを選択します。
$(document).ready( function(){
var studentinfo = [{"StudentId":1,"CourseId":19,"CourseNo":"BIO234","CourseName":"Biology"},
{"StudentId":38, "CourseId":1,"CourseNo":"INFO101","CourseName":"Bsc Information Communication Technology"},
{"StudentId":36, "CourseId":8,"CourseNo":"INFO103","CourseName":"Business and Finance"} ];
$('#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 currentcourse = $('#currentStudentCourse').val(studentinfo[i].CourseNo + " - " + studentinfo[i].CourseName);
var newcourse = $('#newStudentCourse').val(studentinfo[i].CourseId);
$('.courses').val(newcourse);
break;
}
}
}
});
});
私が抱えている問題は以下のとおりです。新しいコースの詳細が表示されるように、txt入力を更新したいと思います。しかし、私が理解できない問題は、テキスト入力にコース番号とコース名を表示する代わりに、更新されたコースのIDをテキスト入力に表示することです。jQuery("#currentStudentCourse").val(newStudentCourse);これで、コースID値がテキスト入力に表示されるため、なぜこれを行うのかがわかりました。しかし、私の質問は、更新後に入力されたテキストにコース番号とコース名を表示できるように、IDのコース番号とコース名を見つけるためにコースIDをどのように使用できるかということです。
function submitform() {
$.ajax({
type: "POST",
url: "updatestudent.php",
data: $('#editForm').serialize(),
success: function(html){
var newStudentCourse = jQuery("#newStudentCourse").val();
jQuery("#currentStudentCourse").val(newStudentCourse);
}
});
}
アップデート：
これは、学生を選択し、新しいコースを選択して送信できるアプリケーションです。現在のコースのテキスト入力で、コースIDである番号に変更されていることがわかります。同じコードを含むJsfiddleはこのjsfiddleにあります：http：//jsfiddle.net/Dst4Q/6/