Populating a Select Element with .each

I am getting back a huge crazy JSON from an API, and I am struggling with putting it inside a select box. So far I have this code:

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

    });

When I look at the console I see this:

<select></select><option value="4434">Option 1</option><option value="43333380">Option 2</option><option value="3233223">Opti开发者_如何转开发on 3</option> ...

Why is the <select></select> being appended initially? Should the opening tag be set, then the option values added and finally the closed select tag?

The code looks crap, but I need to get this working properly before I clean it up. Any advice would really help, thanks!

---

You need to construct your element first, before appending it.

When you call $('#gaCell').html('<select>'), you're telling jQuery to append a select element, including closing tag.

Try this:

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

    });

This way you build up the full select element including children before appending it.

---

You can't append half a tag to an element, so when you try to put "<select>" in the cell, the browser will make a complete select element out of it.

Create the select element first:

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

Now you can add options to it:

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

After the loop you add the select element to the cell:

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

---

I think string juggling for building HTML is somewhat unelegant. Consider this:

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

Also, I recommend using variable names that have a meaning istead of k1 and v1 and so on.

---

$("#gaCell").html("<select>"); will make the contents of #gaCell = '<select></select>';

$("#gaCell").append("</select>"); will add '<select></select>' to the end of whatever else is inside #gaCell

---

When you insert the options, you have to insert into the select, not into #gaCell. I would generate the HTML in a string and then call $("#gaCell").html(someHTML) instead of multiple DOM insertions, it's a little faster;

   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);

A hint for postiong code, remove your console.logs, just adds noise.