Заполнение выбранного элемента с помощью .each - PullRequest
Новая
       26

Заполнение выбранного элемента с помощью .each

0 голосов
/ 08 июля 2011

Я получаю огромный сумасшедший JSON от API, и я изо всех сил стараюсь поместить его в поле выбора.Пока у меня есть этот код: 

$('#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>?Должен ли быть установлен открывающий тег, затем добавлены значения параметров и, наконец, закрытый тег выбора?

Код выглядит дерьмово, но мне нужно, чтобы это работало правильно, прежде чем я его уберу.Любой совет действительно поможет, спасибо!

Ответы [ 5 ]

4 голосов
/ 08 июля 2011

Вам необходимо сначала создать свой элемент, прежде чем добавлять его.

Когда вы вызываете $('#gaCell').html('<select>'), вы говорите jQuery добавить элемент выбора, включая закрывающий тег.

Попробуйте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());

    });

Таким образом, вы создаете полный элемент select, включая дочерние, до его добавления.

1 голос
/ 08 июля 2011

Я думаю, что жонглирование строк для построения 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 и т. Д.

1 голос
/ 08 июля 2011

Вы не можете добавить половину тега к элементу, поэтому, когда вы попытаетесь поместить "<select>" в ячейку, браузер сделает из него полный элемент выбора.

Сначала создайте элемент select: 

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

Теперь вы можете добавить опции к нему: 

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

После цикла вы добавляете элемент select в ячейку: 

$('#gaCell').append(sel);
0 голосов
/ 08 июля 2011

Когда вы вставляете опции, вы должны вставить их в выбор, а не в #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, просто добавьте шум.

0 голосов
/ 08 июля 2011

$("#gaCell").html("<select>"); сделает содержимое #gaCell = '<select></select>';

$("#gaCell").append("</select>"); добавит '<select></select>' к концу того, что находится внутри #gaCell

...