Question

下面我有一個下拉菜單：

$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代碼根據從下拉菜單中選擇的選項，在上面的文本輸入中顯示詳細信息。它填充文本輸入的細節沒有問題。但是我的問題是，假設用戶在下拉菜單中選擇了「請選擇」選項，那麼所有的文本輸入都應該是空的。問題在於它仍然在文本輸入中顯示信息，儘管我在「PLease Select」選項中。

如果從下拉菜單中選擇「請選擇」選項，爲了能夠將文本輸入消隱，我需要在下面的代碼中更改哪些內容？

$(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('');   
      } 
     }); 
     }); 

Answer 1

問題：

有錯誤，會顯示在錯誤控制檯的錯誤，當我 再次選擇「請」選擇選項，錯誤指出 coursedata是在這個不確定的線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(''); 
     } 
    }); 
});