Question

我正在创建一个脚本，我可以编辑学生的详细信息。那么我会在下拉菜单中从学生列表中选择一名学生，该下拉菜单使用以下代码进行编译：

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

我正在尝试使用上述这一行，当选择学生时，它将在课程列表中的课程下拉菜单中选择用户当前正在学习的课程。问题是，在选择学生后，它仍然会在课程下拉菜单中显示“请选择”选项

我的问题是，在下面的下拉菜单中的课程列表中，如何在选择学生后在课程下拉菜单中选择学生的课程？

Answer 1

如果您发布的编辑是您的确切代码，那么您的代码没有任何直接的错误。我把它复制到jsFiddle - http://jsfiddle.net/GSDUx/ - 它按设计工作。

您的问题是，student <select>中有4名学生，但studentinfo数组中只有2名学生，studentinfo中只有1名学生数组也位于course <select>。

因此，唯一一次更改course <select>的是 <option value='36'>u0867588 - paul smith</option>
=＆GT; <option value='2'>INFO102 - Bsc Computing</option>
或
<option value='38'>u0495333 - Jack smith</option>
=＆gt; <option value="">Please Select</option>
（此更改为<option value="">Please Select</option>，因为CourseId:19不存在。

<select name="student"> <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>

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"}];

<select name="courses"> <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>

Answer 2

使用jQuery命令更新课程选择框的值

$('#newStudentCourse').val(newcourse);

我附上了jQuery命令的简化版本：http://jsfiddle.net/waQYz/

如何从课程列表中选择学生的课程？

2 个答案: