使用 .each 填充选择元素

Question

我从 API 中返回了一个巨大的疯狂 JSON，并且我正在努力将其放入选择框内。到目前为止，我有这段代码：

$('#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> ...

为什么最初会附加 ？是否应该设置开始标记，然后添加选项值，最后设置闭合选择标记？

代码看起来很糟糕，但在清理之前我需要让它正常工作。任何建议都会非常有帮助，谢谢！

Answer 1

在附加元素之前，您需要先构建元素。

当您调用 $('#gaCell').html('') 时，您是在告诉 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());

    });

通过这种方式，您可以在附加元素之前构建包括子元素在内的完整选择元素。

Answer 2

您无法将半个标签附加到元素上，因此当您尝试将 "" 放入单元格时，浏览器将从中创建一个完整的 select 元素。

首先创建选择元素：

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

现在您可以向其添加选项：

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

在循环之后将选择元素添加到单元格：

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

Answer 3

我认为构建 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});
                });
            }
        });
    });
});

另外，我建议使用有意义的变量名称，而不是 k1 和 v1 等。

Answer 4

$("#gaCell").html(""); 将使 #gaCell = '< /选择>';

$("#gaCell").append(""); 会将 '' 添加到末尾#gaCell 内的其他内容

Answer 5

插入选项时，必须插入到 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);

发布代码的提示，删除 console.logs，只会增加噪音。