下拉菜单中没有选择选项

No option selected in drop down menu


下拉菜单中没有选择选项 已获得3个解决方法 2020-08-18 18:08:22 php

在这里有一个应用程序

现在让我们说在我的数据库它看起来像这样:

课程表:

CourseId CourseNo CourseName          Duration
1        INFO101  ICT                 3/4
2        INFO102  Computing           2/3
3        INFO103  Computing Science   3

在课程下拉菜单中,它显示数据库中的表亲列表,如下所示:

Please Select
INFO101-ICT 
INFO102-Computing
INFO103-Computing Science 

在持续时间下拉菜单中,它显示以下持续时间选项:

Please Select
1
1/2
2
2/3
3
3/4
4
4/5
5
5/6
6
6/7
7
7/8
8
8/9
9
9/10
10

现在,在应用程序中发生的事情是,当您从下拉菜单中选择一个课程时,它应该从持续时间下拉菜单中选择与数据库中属于该课程的持续时间相匹配的duartion.

因此,例如,如果我从coure下拉菜单中选择课程 INFO101-ICT ,则它应在持续时间下拉菜单中自动选择持续时间 3/4 .

但是在应用程序中它没有这样做,当我选择一个课程时,它只是在持续时间下拉菜单中选择一个空白选项.

我的问题是,如何根据从课程下拉菜单中选择的课程,在持续时间下拉菜单中选择正确的持续时间?

以下是应用程序的完整代码:

     <?php

        // connect to the database
        include('connect.php');


        /* check connection */
        if (mysqli_connect_errno()) {
            printf("Connect failed: %s\n", mysqli_connect_error());
            die();
        }

        ?>

        <h1>EDIT COURSE</h1>

        <?php

        $min_year     = 1;
        $max_year     = 10;
        $years        = range($min_year, $max_year); // returns array with numeric values of 1900 - 2012
        $durationHTML = '';
        $durationHTML .= '<select name="duration" id="newDuration">' . PHP_EOL;
        $durationHTML .= '<option value="">Please Select</option>' . PHP_EOL;

        foreach ($years as $year) {
            $durationHTML .= "<option>$year</option>" . PHP_EOL;
            if ($year != $max_year) {
                $nextYear = $year + 1;
                $durationHTML .= "<option>$year/$nextYear</option>" . PHP_EOL;
            }
        }
        $durationHTML .= '</select>';

        $newCourseNo = (isset($_POST['CourseNoNew'])) ? $_POST['CourseNoNew'] : '';

        $coursequery = "
        SELECT CourseId, CourseNo, CourseName, Duration
        FROM Course
        ORDER BY CourseNo
        ";

        $courseqrystmt = $mysqli->prepare($coursequery);
        // You only need to call bind_param once

        $courseqrystmt->execute();

        $courseqrystmt->bind_result($dbCourseId, $dbCourseNo, $dbCourseName, $dbDuration);

        $courseqrystmt->store_result();

        $coursenum = $courseqrystmt->num_rows();

        $courseHTML = '';

        $courseHTML = '<select name="courses" id="coursesDrop">' . PHP_EOL;
        $courseHTML .= '<option value="">Please Select</option>' . PHP_EOL;

        $courseInfo = array();

        while ($courseqrystmt->fetch()) {
            $courseHTML .= sprintf("<option value='%s'>%s - %s</option>", $dbCourseId, $dbCourseNo, $dbCourseName) . PHP_EOL;

            $courseData               = array();
            $courseData["CourseId"]   = $dbCourseId;
            $courseData["CourseNo"]   = $dbCourseNo;
            $courseData["CourseName"] = $dbCourseName;
            $courseData["Duration"]   = $dbDuration;

            array_push($courseInfo, $courseData);
        }


        $courseHTML .= '</select>';


        $courseform = "
        <form action='" . htmlentities($_SERVER['PHP_SELF']) . "' method='post' id='courseForm'>
        <p><strong>Course:</strong> {$courseHTML} </p>   
        </form>";

        echo $courseform;



        $editcourse = "
        <form id='updateCourseForm'>

        <p><strong>New Course Details:</strong></p>
        <table>
        <tr>
        <th>Duration (Years):</th> 
        <td id='data'>{$durationHTML}</td>
        </tr>
        </table>

        </form>
        ";

        echo $editcourse;

        ?>

        < script type = "text/javascript" > 
$(document).ready(function() {

    var courseinfo = '<?php echo json_encode($courseInfo);?>';

    $('#coursesDrop').change(function() {

        var courseId = $(this).val(),
        coursedata;

        for (var i = 0, l = courseinfo.length; i < l; i++) {
            if (courseinfo[i].CourseId == courseId) {
                coursedata = courseinfo[i];
            }
        }

        var index = $('#newDuration option[value="' + courseinfo.Duration +  '"]').attr('selected','selected');
        alert(courseinfo.Duration);

    });
});
         < /script>

下拉菜单中没有选择选项 方法1

一个问题是:

if (courseinfo[i].courseId = courseId) {
    coursedata = courseinfo[i];
}

应该是这样的:

if (courseinfo[i].courseId == courseId) {
    coursedata = courseinfo[i];
}

您想要比较运算符 == 而不是 = .

另一个问题是以下是文字字符串,而不是调用php函数:

var courseinfo = '<?php=json_encode($courseInfo);?>';

查看页面源,您将看到 courseinfo 的值为 '<?php=json_encode($courseInfo);?>' ,而不是 json_encode($courseInfo) 的输出.你需要解决这个问题来输出php.

编辑2

你的代码中几乎没有更多的问题.这里是将工作的代码.

Javascript

var courseinfo = [{"CourseId":1,"CourseNo":"INFO101","CourseName":"Bsc Information Communication Technology","Duration":"3\/4"},{"CourseId":2,"CourseNo":"INFO102","CourseName":"Bsc Computing","Duration":"3\/4"},{"CourseId":8,"CourseNo":"INFO103","CourseName":"Business and Finance","Duration":"3"},{"CourseId":7,"CourseNo":"INFO104","CourseName":"English","Duration":"3\/4"},{"CourseId":9,"CourseNo":"INFO105","CourseName":"Mathematics","Duration":"3\/4"},{"CourseId":10,"CourseNo":"INFO106","CourseName":"Law","Duration":"3"}];

$('#coursesDrop').change(function() {

    var courseId = $(this).val(),
        coursedata, i;

    for (i = 0, l = courseinfo.length; i < l; i++) {
        if (courseinfo[i].CourseId == courseId) {
            coursedata = courseinfo[i];
        }
    }

    var index = $('#newDuration').val(coursedata.Duration);

});​

Demo

这是问题.

您需要删除 courseinfo 数组周围的单引号:

var courseinfo = [...];

你的if语句需要正确的情况下它的变量 courseinfo CourseId .在数组是 CourseId 所以这是它需要在 if 比较:

if (courseinfo[i].CourseId == courseId) {
    ...
}

使用 coursedata.Duration 设置 #newDuration val .

var index = $('#newDuration').val(coursedata.Duration);

下拉菜单中没有选择选项 方法2

在你的代码中,你有

if (courseinfo[i].courseId = courseId) {
  coursedata = courseinfo[i];
}

你的如果不好,应该是

if (courseinfo[i].courseId == courseId) {
  coursedata = courseinfo[i];
}

然后,要选择,您应该使用

$('#newDuration option[value="' + courseData.Duration +  "]').attr("selected","selected");

您需要删除 $('# newduration')[0].selectedIndex = index;.你在for循环中的比较是与courseId,而你的对象包含CourseId


下拉菜单中没有选择选项 方法3

尝试:

$('#newDuration').val(courseData.Duration);

insted of

var index = $('#newDuration option[value="' + courseData.Duration +'"]').index('#newDuration option');
$('#newDuration')[0].selectedIndex = index;

--- 编辑 ---

如果 courseinfo 是一个JsonString,你应该像这样改变你的代码:

var courseinfoJson = '<?php=json_encode($courseInfo);?>';
var courseinfo = $.parseJSON(courseinfoJson);

 $('#coursesDrop').change(function() {
    var courseId = $(this).val();
    var coursedata;

    for (var i = 0, i = courseinfo.length; i++) {
        if (courseinfo[i]['CourseId'] == courseId) {
            coursedata = courseinfo[i];
        }
    }

    $('#newDuration').val(courseData['Duration']);
}

--- 编辑 ---


.htaccess .net .net-core 2d 3d 3d-printing ab-initio abp abstract-syntax-tree actions-on-google actionscript-3 active-directory activemq activemq-artemis acumatica adobe-xd aframe ag-grid agora.io air airflow ajax akka alert alexa algorithm alignment allure amadeus amazon-cloudformation