在Ajax調用後填充額外的選擇輸入

Question

我有一個選擇輸入。當更改時，將觸發以下內容：

$('#type').change(function() { 
    var selectedYear = $("#year option:selected").val(); 
    var selectedProduct = $("#product option:selected").val(); 
    var selectedType = $("#type option:selected").val(); 
    $.ajax({ 
     type: "get", 
     url: "./report", 
     data: { 
      year : selectedYear, 
      product : selectedProduct, 
      type : selectedType 
     } 
    }).done(function(data){ 
     var url = $('meta[name="base_url"]').attr('content'); 

     $('#displayImage').attr('src', ''); 
     $('#displayImage').attr('src', url + data); 
     $('#displayImage').css('display', 'block'); 
    }); 
}); 

它調用的url會觸發一個函數，它基本上會用圖像路徑填充一個數組。一旦圖像陣列填充，我做

if(!empty($imageArray)) { 
    return $imageArray; 
} 

現在在我的ajax調用完成部分我顯示圖像。如果數組只有一個圖像路徑，這工作正常。但是，如果數組中有多個圖像路徑，我需要顯示一個額外的選擇輸入，以便他們可以選擇合適的圖像。

怎麼可能實現這樣的事情？

感謝

Answer 1

你需要有一個空的<選擇>隨時可以取消隱藏。一旦你有數據，你可以填寫像這樣的選擇 -

$.each($imageArray, function(key, value) { 
$('#myEmptyAndNowUnhiddenSelect') 
    .append($("<option></option>") 
    .attr("value",key) 
    .text(value)); 
});