jQuery的鏈式選擇阿賈克斯 - 需要幫助

我最近張貼了我的問題see previous question，並收到了良好的工作解決方案，但是當我申請的解決方案，我的代碼，我發現，如果有兩個選擇之間的任何HTML標籤，第二個選擇列表不會更新。我的猜測是.next沒有找到我正在尋找的類。jQuery的鏈式選擇阿賈克斯 - 需要幫助

<cfloop query="rsRequestSystems"> 
<tr> 
    <td><select class="platform" name="platform" id="platform"> 
      <option></option> 
      <cfloop query="rsPlatform"> 
       <option value="#rsPlatform.optionValue#" <cfif rsRequestSystems.platform eq rsPlatform.optionValue>selected</cfif>>#rsPlatform.optionDesc#</option> 
      </cfloop> 
     </select></td> 
    <td><select name="model" id="model"> 
      <option></option> 
      <cfloop query="rsModels"> 
       <option value="#rsModels.optionValue#" <cfif rsRequestSystems.model eq rsModels.optionValue>selected</cfif>>#rsModels.optionDesc#</option> 
      </cfloop> 
     </select></td> 
</tr>

和jQuery代碼是：

$(".platform").live("change", function() { 
    var firstOption = $(this); 
    $.getJSON("index.cfm?do=misc.getModels",{platform: $(this).val()},  
    function(j){ 
     var options = ''; 
     for (var i = 0; i < j.length; i++) 
      { 
       options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'; 
      } 
    firstOption.next("#model").html(options); 
    }); 
});

，這裏是正在返回的JSON數據的一個示例：

[{"optionValue":"", "optionDisplay":"Select Model"},]

來源

2011-03-08 HPWD

我要補充一點，行可以動態添加，因此我不能依靠唯一的ID。這個想法是，用戶將通過添加必要的系統來填充表單，然後提交一個大表單。我知道，這不是首選的方法，但我正在處理需求。可能很容易有100多個系統，並且客戶端不希望最終用戶在最終提交之前添加系統時不得不等待頁面刷新。 – HPWD 2011-03-08 18:33:58

不幸的是，我不能依靠唯一的ID。如果我是口頭通過這個走，我會說，「當.platform變化，我需要找到包含已更改select.platform父表，然後更新與Ajax調用的結果select.models 「。 – HPWD 2011-03-08 18:39:13

的ID必須是獨特。由於您的代碼表示一個表格行，我假設其他行看起來相似。如果是這種情況，請改用類。
但是，如果這些真的是與此ID的唯一元素，你可以簡單地使用：

$('#model').html(options);

next只有當它選擇匹配選擇下一個兄弟。根據您的HTML，你可以這樣做：

firstOption.parent().next().children('select').html(options);

其實，你類platform，沒有ID添加live處理程序的元素你的代碼不應該工作。也許是一個錯字？

假設你的元素有類而不是ID，您也可以這樣做：

firstOption.closest('tr').find('.model').html(options);

來源

2011-03-08 18:20:50

它代表了一個錶行，是的，但實際上它是從實際單獨循環，而不只是該行的表的一個片段。還有10個其他領域我忽略了簡單的代碼在這裏發佈。 – HPWD 2011-03-08 18:35:25

@dlackey：當然。我只是說我假設，其他行也包含具有相同ID的元素。你應該使用類來代替。 – 2011-03-08 18:43:35

此選項起作用。 'firstOption.closest（'tr'）。find（'。model'）。html（options）;' 我會將它添加到我的「prod」代碼中，以查看它是否在那裏工作。非常感謝你。 – HPWD 2011-03-08 18:44:15

爲什麼不這樣：

$("#model").html(options);

的<select>已經有一個ID分配給它

來源

2011-03-08 18:22:01 moe

怎麼樣：

$(".platform").live("change", function() { 
    var firstOption = $(this); 
    $.getJSON("index.cfm?do=misc.getModels",{platform: $(this).val()},  
    function(j){ 
     var options = ''; 
     for (var i = 0; i < j.length; i++) 
      { 
       options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'; 
      } 
    $("#model").html(options); 
    }); 
});

只要改變未來，我想是因爲是一個ID，就不會出現具有相同ID的另一個因素。

來源

2011-03-08 18:25:47

jQuery的鏈式選擇阿賈克斯 - 需要幫助

回答

相關問題