下拉填充ajax

我有以下問題：當我從下拉列表中選擇一個元素時，我想通過ajax自動填充另一個下拉列表。這個想法是在選擇「類型」後，子類別（sub_type）不會加載。下拉填充ajax

HTML 
<select id="type" name="type"> 
<option value="1">General</option> 
<option value="2">Test</option> 
</select> 
<select id="sub_type" name="sub_type"> 
</select> 


SCRIPT 
    $("#type").change(function(){ 
    $.getJSON("ajax/add_subcathegory.php",{id: $(this).val(), ajax: 'true'}, function(j){ 
      var options = ''; 
      for (var i = 0; i < j.length; i++) { 
      options += '<option value="' + j[i].id+ '">' + j[i].name+ '</option>'; 
      } 
     }); 
    $("#sub_type").html(options); 
    });

我的AJAX腳本返回：

[{id: 0, name: 'Mark'}, {id:1, name: 'Andy'}, {id:2, name: 'Richard'}]

但subcathegory（secont選擇）isn`t加載。

來源

2011-08-17 ka_lin

目前尚不清楚你有什麼問題。你能重申你的問題嗎？ –

編輯我的聲明 –

假設阿賈克斯成功函數確實叫，改變功能代碼：

  var $subType = $("#sub_type"); 
      $subType.empty(); 
      $.each(j, function() { 
      $subType.append($('<option></option>').attr("value", this.id).text(this.name)); 
      });

你的主要問題目前是：

html函數僅被調用一次，因爲它不在成功函數中。
在阿賈克斯的數據元素都具有按鍵ID和名而不是optionValue和optionDisplay

更新：

返回JSON是無效的。字符串必須用雙引號括起來，而不是單引號。結果，getJSON()調用失敗。

來源

2011-08-17 10:35:50 Codo

下面是正確的嗎？因爲它沒有任何功能$（「＃type」）。change（function（）{.getJSON（「ajax/add_subcathegory.php」，{id：$（this）.val（），ajax：'true '}，函數（J）{ \t \t變量$子類型= $（「＃sub_type」）; $ 。每個（J，函數（）{$ subType.append（$（' 「）.attr（「value」，this.id）.text（this.name））; }）; }）; }）; –

當你說「它不工作」，我想你的意思是沒有任何反應。請嘗試調試失敗的地方，以便我們能夠更好地幫助您。查看Firefox的Javascript控制檯（或瀏覽器中的等效控制檯），查看是否發生Javascript錯誤。如果沒有，請使用Firebug，Fiddler或類似的工具來查看網絡請求並顯示爲Ajax請求和Ajax響應。藉助Firebug，您還可以在成功功能中設置斷點，以查看它是否被調用。 – Codo

我正在使用chrome，因此我可以看到ajax響應，並且在運行修改的腳本時沒有錯誤 –

問題是，您正在將ajax JSON調用之後的html分配給#sub_type。你應該給它分配在Ajax回調函數是這樣的：

$("#type").change(function(){ 
    $.getJSON("ajax/add_subcathegory.php",{id: $(this).val(), ajax: 'true'}, function(j){ 
    var options = ''; 
    for (var i = 0; i < j.length; i++) { 
     options += '<option value="' + j[i].id + '">' + j[i].name + '</option>'; 
    } 
    $("#sub_type").html(options); 
    });  
});

來源

2011-08-17 10:35:48

不工作：|。 ajax響應中的空格是否會計數？ –

你確定#sub_type是可見的嗎？嘗試調用$（'＃sub_type'）。html（''）;在ajax回調之外查看它是否工作（甚至在onchange函數之外）。 –

謝謝，解決問題 –

回答

相關問題