使用.each填充選擇元素

-1

我從API獲取一個巨大的瘋狂JSON，並且我正在努力將它放入選擇框中。到目前爲止，我有這樣的代碼：使用.each填充選擇元素

$('#gaua').live('change', function() { 

     var dropDownValue = $(this).val(); 

     $("#gaCell").html("<select>"); 

     $.each(gaAccount, function(k, v) { 
      $.each(v, function(k1, v1) { 
       console.log("k1 "+k1+" "+dropDownValue); 
       if(k1 == dropDownValue) { 
        console.log("k1 is equal to dropDownValue"); 
        $.each(v1, function(k2, v2) { 
         console.log("v1 "+v1+" k2 "+k2+" v2 "+v2); 
         $("#gaCell").append("<option value='"+v2+"'>"+k2+"</option>"); 
        }); 
       } 
      }); 
     }); 

     $("#gaCell").append("</select>"); 

     console.log($("#gaCell").html()); 

    });

當我看到我看到這個控制檯：

<select></select><option value="4434">Option 1</option><option value="43333380">Option 2</option><option value="3233223">Option 3</option> ...

爲什麼<select></select>最初被追加？是否應設置開始標記，然後添加選項值，最後是關閉的選擇標記？

該代碼看起來很糟糕，但我需要得到這個工作之前，我清理它正常。任何建議真的會有所幫助，謝謝！

來源

2011-07-08 Doug Molineux

你爲什麼要爲改變事件直播？改變事件不會在IE中冒泡... –

感謝您的評論。我使用的是直播，因爲此下拉菜單是在頁面加載並且用戶執行操作後添加的。我想我會在DOM加載後添加某些東西時出於習慣。沒有必要嗎？ –

問題是，生活取決於事件冒泡和改變不在IE中泡。在IE中試用它，我認爲它不起作用。 –

您需要先構建您的元素，然後再附加它。

當您致電$('#gaCell').html('<select>')時，您告訴jQuery追加select元素，包括結束標記。

試試這個：

$('#gaua').live('change', function() { 

     var dropDownValue = $(this).val(); 

     $select = $("<select>"); 

     $.each(gaAccount, function(k, v) { 
      $.each(v, function(k1, v1) { 
       console.log("k1 "+k1+" "+dropDownValue); 
       if(k1 == dropDownValue) { 
        console.log("k1 is equal to dropDownValue"); 
        $.each(v1, function(k2, v2) { 
         console.log("v1 "+v1+" k2 "+k2+" v2 "+v2); 
         $select.append("<option value='"+v2+"'>"+k2+"</option>"); 
        }); 
       } 
      }); 
     }); 

     $("#gaCell").append($select); 

     console.log($("#gaCell").html()); 

    });

這樣你建立包括追加前兒童充分選擇的元素。

來源

2011-07-08 17:31:23 rossipedia

非常有趣謝謝你的答案。當我在結尾添加結束選擇標記時，我很好奇，爲什麼當我登錄元素的全部內容時，在控制檯中看不到？例如'<選項.....' –

因爲你不能追加一個結束標籤。當你調用append（）時，jQuery會嘗試解析你傳遞的字符串作爲有效的html。而一個結束標籤是無效的，所以它默默地忽略它並且什麼都不做。 – rossipedia

非常感謝您的解釋 –

$("#gaCell").html("<select>");將使#gaCell = '<select></select>'的內容;

$("#gaCell").append("</select>");將增加'<select></select>'到任何其他的到底是內部#gaCell

來源

2011-07-08 17:32:14 AlienWebguy

不能半個標籤附加到一個元素，所以當你試圖把在細胞內，瀏覽器會做一個完整的從中選擇元素。

創建select元素第一：

var sel = $('<select/>');

現在你可以添加選項到它：

sel.append($('<option/>', { value: v2 }).text(k2));

循環後您選擇元素添加到單元格：

$('#gaCell').append(sel);

來源

2011-07-08 17:33:14 Guffa

當您插入選項時，您必須插入到select中，而不是#gaCell中。我會在一個字符串中生成HTML，然後調用$("#gaCell").html(someHTML)而不是多個DOM插入，它會更快一些;

var html = "<select>"; 

    $.each(gaAccount, function(k, v) { 
     $.each(v, function(k1, v1) { 
      if(k1 == dropDownValue) { 
       $.each(v1, function(k2, v2) { 
        html += "<option value='"+v2+"'>"+k2+"</option>"; 
       }); 
      } 
     }); 
    });   
    html += "</select>"; 
    $("#gaCell").html(html);

提示postiong代碼，刪除您的console.logs，只是增加了噪音。

來源

2011-07-08 17:37:33

我認爲構建HTML的字符串雜耍有點不雅觀。試想一下：

$('#gaua').live('change', function() { 
    var dropDownValue = $(this).val(); 
    var $select = $("<select>").appendTo("#gaCell"); 

    $.each(gaAccount, function(i, acc) { 
     $.each(acc, function(name, details) { 
      if(name == dropDownValue) { 
       $.each(details, function(label, value) { 
        $select.append("<option>", {value: value, text: label}); 
       }); 
      } 
     }); 
    }); 
});

另外，我建議使用具有的和v1等意義istead變量名。

來源

2011-07-08 17:45:17 Tomalak

使用.each填充選擇元素

回答

相關問題