嵌套jQuery每个语句在第一个语句完成后运行

时间:2015-06-19 21:45:28

标签: javascript jquery html each

我想通过读取JSON变量动态创建一个组合框。

问题是第一个$.each()语句总是在第二个$.each()语句之前完成。

这使得这两个选项不在<select>元素之内。

我做错了什么?

var oFields = {
    "fields": [
        {"name": "idtipopratica", "label": "ID Tipo Prat.", "type": "hidden", "visible": "true", "disabled": "false"},
        {"name": "tipologia", "label": "Tipologia", "type": "select", "selectParams": {
            "source": "list",
            "values": {"CC":"Conto Corrente","FI":"Conto Finanziario"}
        },"visible": "true", "disabled": "false"}
    ]
};
var html = '<form id="editForm" method="post" class="form-horizontal">';
$.each(oFields.fields, function (i, object) {
    switch(object.type) {
        case "select":
            html += '<select id="' + object.name + '" name="' + object.name + '"/>';
            var selectParams = object.selectParams;
            console.log(selectParams);
            if (selectParams.source === "table") {
                //console.log(selectParams.keycolumn);
            } else {
                $.each(selectParams.values, function(k,v){
                    html += '<option value="' + k + '">' + v + '</option>';
                    console.log(k+"|"+v);
                });
            }
            break;
        default:
            html += '<input type="' + object.type + '" id="' + object.name + '" name="' + object.name + '"/>';
    }
    html += '</select>';
});
html += '</form>';
$("body").html(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1 个答案:

答案 0 :(得分:5)

您在/>元素的开头标记上添加了自动关闭标记(select

html += '<select id="' + object.name + '" name="' + object.name + '"/>';

这应该是

html += '<select id="' + object.name + '" name="' + object.name + '">';

Demo