如何使用jquery在文本输入中显示正确的数据

时间:2012-12-30 21:59:20

标签: jquery html textinput

下面我有一个表格,其中包含一个文本输入,其中包含学生当前课程的详细信息,以及一个课程下拉菜单,其中包含一系列课程。

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


}
});        
}

更新

这是application,您可以在其中选择学生,然后点击新课程并提交。您将在“当前课程”文本输入中看到它变为一个数字,即课程ID。包含相同代码的Jsfiddle在这个jsfiddle中:http://jsfiddle.net/Dst4Q/6/

1 个答案:

答案 0 :(得分:1)

您应该能够从

获取所需信息
$("#newStudentCourse option:selected").text()