使用.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填充选择元素

回答

相关问题