下面我有一个表单,其中包含一个包含学生当前课程详细信息的文本输入和一个包含课程列表的课程下拉菜单。
<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/