【问题标题】:How to get student's course to be selected from a list of Courses? [closed]如何从课程列表中选择学生的课程? [关闭]
【发布时间】:2012-12-30 06:33:13
【问题描述】:

我正在创建一个可以编辑学生详细信息的脚本。因此,我从下拉菜单中的学生列表中选择了一个学生,该下拉菜单使用以下代码编译:

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

我试图对上面的行做的是,当一个学生被选中时,它会从课程列表中选择用户当前正在学习的课程下拉菜单中的课程。问题是在选择学生后,它仍然在课程下拉菜单中显示“请选择”选项

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

【问题讨论】:

  • 您的大部分 php 代码与问题无关。无需针对客户端问题发布 sql 查询。发布实时 html 示例,而不是一堆循环来创建选项。 studentinfo 未在您的脚本中定义。因为这是导致问题的区域,这将有助于了解它的来源
  • 看起来你混淆了 php 和 javascript/jQuery 的工作方式。您正在尝试在页面加载后通过 javascript 数组 studentinfo[$i] 访问 php 数组 $studentInfo[$i]。页面加载后,不再可以访问 php 数组。您将需要使用 Ajax/jQuery 再次获取 php 数组以设置值,或者将 php 数组保存在 html 代码中的某个位置以便能够使用 javascript/jQuery 访问它。
  • 再次......如果问题是客户端,你为什么发布服务器代码而不是实时源代码?
  • 代码工作正常....如果课程价值存在。试试 Paul Smith...课程价值存在于选项中,但 Jack snith 不存在 jsfiddle.net/92NvR
  • 浪费时间去汽车厂了解我的汽车无法启动的车轮是如何制造的......当问题是电池没电时

标签: php javascript jquery mysqli


【解决方案1】:

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

您的问题是您的 student &lt;select&gt; 中有 4 个学生,但您的 studentinfo 数组中只有 2 个学生,并且 studentinfo 数组中只有 1 个课程也在 course &lt;select&gt;.

所以它唯一会改变course &lt;select&gt; 的时间是for
&lt;option value='36'&gt;u0867588 - paul smith&lt;/option&gt;
=> &lt;option value='2'&gt;INFO102 - Bsc Computing&lt;/option&gt;

&lt;option value='38'&gt;u0495333 - Jack smith&lt;/option&gt;
= > &lt;option value=""&gt;Please Select&lt;/option&gt;
(这会更改为 &lt;option value=""&gt;Please Select&lt;/option&gt;,因为 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>

【讨论】:

    【解决方案2】:

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

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

    我附上了一个简化版的jQu​​ery命令:http://jsfiddle.net/waQYz/

    【讨论】:

    • 我能快速问你一个问题吗,在用户为学生选择了新课程后,如何获取当前课程文本输入以显示新课程的课程编号和课程名称选择为目前它在更改后的文本输入中显示课程的 ID(从课程下拉菜单中选择的选项的值)?
    • 在我的问题的最后一段代码中,如果向下滚动,您将看到课程下拉菜单的外观,您将能够看到课程的 ID(下拉选项的值) , 课程编号和课程名称
    • @Manixman 我将答案更改为使用您的 ID。我还更新了 jsfiddle 以解释如何更新输入文本字段。 jsfiddle.net/waQYz/1
    猜你喜欢
    • 1970-01-01
    • 2021-04-09
    • 1970-01-01
    • 2022-01-23
    • 1970-01-01
    • 1970-01-01
    • 2021-11-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多