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> ...

为什么最初附加<select></select>？是否应设置开始标记，然后添加选项值，最后是关闭的选择标记？

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

Answer 1

您需要先添加元素，然后再添加它。

当你致电$('#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());

    });

这样，您可以在添加之前构建包含子项的完整select元素。

Answer 2

您不能将半个标记附加到元素，因此当您尝试将"<select>"放入单元格时，浏览器将从中生成一个完整的选择元素。

首先创建select元素：

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

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

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

在循环之后，将select元素添加到单元格中：

$('#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});
                });
            }
        });
    });
});

另外，我建议使用具有[{1}}和k1等含义的变量名称，等等。

Answer 4

$("#gaCell").html("<select>");将制作#gaCell = '<select></select>';

的内容

$("#gaCell").append("</select>");会将'<select></select>'添加到#gaCell

内的其他内容的末尾

Answer 5

插入选项时，必须插入选择，而不是插入#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，只会增加噪音。

使用.each填充选择元素

5 个答案: