ajax調用後填充下拉菜單

我知道，AJAX異步工作（這就是「A」代表）。我在成功回調中移動了所有依賴於AJAX調用結果的代碼。然而，在進行調用之後，我沒有得到選擇dropdwon框來填充任何數據。如何在ajax調用後填充選擇下拉菜單？ajax調用後填充下拉菜單

jQuery的/阿賈克斯

<script> 
function showFields(option){ 
    var content = ''; 
    for (var i = 1; i <= option; i++){ 

    function addNewCourse() { 
    var data; 
     $.ajax({ 
     type: "POST", 
     url: "coursesOffered.php", 
     data: { value : option}, 
     success: function(data){ 
      //alert(data); 
      //console.log(data); 
      content += '<select id="coursename_'+i+'" name="coursename_'+i+'" class="course_list"><option value="" >--- Select ---</option>"'; 
      content += data; 
      content += '</select></br>'; 
     } 
     }); 
    }     
    addNewCourse(); 
    } 
} 
</script>

coursesOffered.php

try { 
    $db_con = new PDO($dsn, $user, $password); 
    $db_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
} catch (PDOException $e) { 
    echo 'Connection failed: ' . $e->getMessage(); 
} 
$course_query = $db_con->prepare("SELECT course_id, course_name FROM courses_selection_list;"); 
$course_query->execute(); 
$data = $course_query->fetchAll(); 
foreach ($data as $row){ 
    //dropdown values pulled from database 
    echo '<option value="' . $row['course_id'] . ':'.$row['course_name'].'">' . $row['course_name'] . '</option>'; 
}

來源

2013-12-23 Code_Ed_Student

添加您的JSON代碼 –

@SridharR你是什麼意思？ –

當你在你的成功做console.log（數據）時會發生什麼？ – Yogesh

看到我的評論在代碼：

function showFields(option) { 
    for (var i = 1; i <= option; i++) { 

    (function(i) { 

     $.ajax({ 
     type: "POST", 
     url: "coursesOffered.php", 
     data: { 
      value: option 
     }, 
     success: function (data) { 
      var content += '<select id="coursename_' + i + '" name="coursename_' + i + '" class="course_list"><option value="" >--- Select ---</option>"'; 
      content += data; 
      content += '</select></br>'; 

      // Insert the `content` into DOM here, you cannot return due to the async nature of AJAX 
     } 
     }); 

    })(i); // you have to pass `i` into a function, otherwise when ajax complete, i will equal to `option + 1` 

    } 
}

來源

2013-12-23 08:12:14 Daiwei

好吧，好極了！是否可以設置一個時間間隔來每3秒觸發一次呼叫？ –

@Code_Ed_Student你可以使用setInterval函數 – Daiwei

看來你還沒有使用return語句中addNewCourse（），嘗試return content;阿賈克斯完成後。

$(document).ready(function() { 
    $('#courses_offered').change(function() { 
     var option = $(this).val(); 
     showFields(option); 
     return false; 
    }); 
    function showFields(option){ 
     var content = ''; 
     for (var i = 1; i <= option; i++){ 
      function addNewCourse() { 
       $.ajax({ 
        type: "POST", 
        url: "coursesOffered.php", 
        data: { value : option}, 
        success: function(data){ 
        content += '<div id="course_'+i+'"><label>Course # '+i+'</label><br /><label>Course Name:</label> <select id="coursename_'+i+'" name="coursename_'+i+'" class="course_list"><option value="" >--- Select ---</option>"'; 
        content += data; 
        content += '</select></div></br>';    
        } 
       }); 
       return content; 
      }   
      content = addNewCourse(); 
     } 
     $('#course_catalog').html(content);  
    } 
});

來源

2013-12-23 06:32:39 Yogesh

ajax調用後填充下拉菜單

回答

相關問題