0

以下にドロップダウンメニューがあります：

 $courseHTML = '';

.... //sql code to perform query goes here

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

以下は、コースの現在の詳細をテーブルに表示するhtmlテーブルです。

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

    <p><strong>Current Course Details:</strong></p>
    <table>
    <tr>
    <th></th>
    <td><input type='hidden' id='currentCourseId' name='CourseIdcurrent' value='' /> </td>
    </tr>
    <tr>
    <th>Course ID:</th>
    <td><input type='text' id='currentCourseNo' name='CourseNocurrent' readonly='readonly' value='' /> </td>
    </tr>
    <tr>
    <th>Course Name:</th>
    <td><input type='text' id='currentCourseName' name='CourseNamecurrent' readonly='readonly' value='' /> </td>
    </tr>
    <tr>
    <th>Duration (Years):</th>
    <td><input type='text' id='currentDuration' name='Durationcurrent' readonly='readonly' value=''/> </td>
    </tr>
    </table>    
    </form>

";

ドロップダウンメニューから選択したオプションに応じて、上記のテキスト入力の詳細を表示するjqueryコードが下にあります。入力したテキストに詳細を入力しても問題ありません。しかし、私の問題は、ユーザーがドロップダウンメニューで[選択してください]オプションを選択した場合、すべてのテキスト入力が空になることです。問題は、[選択を選択]オプションを使用しているにもかかわらず、テキスト入力に情報が表示されていることです。

ドロップダウンメニューから[選択してください]オプションが選択されている場合にテキスト入力を空白にできるようにするには、以下のコードで何を変更する必要がありますか？

$(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 currentindex = $('#currentDuration').val(coursedata.Duration);
        var editindex = $('#newDuration').val(coursedata.Duration);
        var currentid = $('#currentCourseId').val(coursedata.CourseId);
        var editid = $('#newCourseId').val(coursedata.CourseId);

            if( $(this).val() !== '' ){
                var text = $(this).find('option:selected').text();
                var split = text.split(' - ');
                $('#currentCourseNo').val( split[0] );     
                $('#currentCourseName').val( split[1] );       
            }
            else{
                $('#currentCourseNo,#currentCourseName,#currentDuration,#currentCourseId').val('');           
            }
        });
        });
4

1 に答える 1

1

問題：

エラーが発生しました。[PLease]選択オプションを再度選択すると、エラーコンソールにエラーが表示されます。このエラーは、この行でコースデータが未定義であることを示しています。var currentindex = $('#currentDuration').val(coursedata.Duration);

説明：

「選択してください」を選択するとcourseIdが空白になるため、forループ内でif条件が満たされないため、coursedataが設定されません。

解決：

最初に有効な（「選択してください...」ではない）選択を確認してから、作業を行ってください。また、JSの他の部分も再編成したので、より意味があります。

$(document).ready(function () {

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

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

        /*
            You only need to do all of this if user selects a course, so check that first.
        */
        if (courseId !== '') {
            /*
                Iterate over courses and, if the one we want exists, populate its info.
            */
            for (var i = 0, l = courseinfo.length; i < l; i++) {
                if (courseinfo[i].CourseId == courseId) {
                    $('#currentDuration').val(courseinfo[i].Duration);
                    $('#newDuration').val(courseinfo[i].Duration);
                    $('#currentCourseId').val(courseinfo[i].CourseId);
                    $('#newCourseId').val(courseinfo[i].CourseId);

                    var text = $(this).find('option:selected').text();
                    var split = text.split(' - ');
                    $('#currentCourseNo').val(split[0]);
                    $('#currentCourseName').val(split[1]);

                    /*
                        Without this break, the loop will continue until i = l.
                        We've already found our match, no need to continue.
                    */
                    break;
                }
            }
        } else {
            $('#currentCourseNo,#currentCourseName,#currentDuration,#currentCourseId').val('');
        }
    });
});
于 2012-12-06T06:57:22.533 に答える