循环遍历<select>标记并将内容附加到JSON对象</select>

时间:2014-08-17 20:39:07

标签: javascript json append nested

我的网站上有一个<select>标记,其中包含多重选择选项。我需要做的是将此<select>标记中的所有这些选项附加到现有的JSON对象中。

我的HTML代码:

<form onsubmit="return false;" role="form">
    <div class="form-group">
        <label for="groupSelector">Group:</label>
        <select class="form-control" id="groupSelector">
            <option value="guests">guests</option>
            <option value="members">members</option>
            <option value="vips">vips</option>
            <option value="mods">mods</option>
            <option value="admins">admins</option>
            <option value="owners">owners</option>
        </select>
    </div>
    <div class="form-group">
        <input type="text" placeholder="Prefix..." class="form-control" id="groupPrefix" />
    </div>
    <div class="form-group">
        <select multiple class="form-control" style="min-height: 170px;" id="groupPermissions">
            <option>permission.node.1</option>
            <option>permission.node.2</option>
            <option>permission.node.3</option>
            <option>permission.node.4</option>
            <option>permission.node.5</option>
        </select>
    </div>
    <div class="text-right">
        <input type="submit" value="Send" class="btn btn-primary" />
        <button value="Save" class="btn btn-default" onclick="save_field_data('perm_manager');">Save</button>
    </div>
</form>

您可以在此HTML中看到<select>字段,其ID为“groupPermissions”'

这是我需要做的:我有这个JSON对象,我想为嵌套在我的JSON对象中的<option>字段附加<select>值。这就是我希望我的JSON对象看起来像:

{
    "selected_group":"mods",
    "prefix":"[Moderator]",
    "permissions": {
        "node": "permission.node.1",
        "node": "permission.node.2",
        "node": "permission.node.3",
        "node": "permission.node.4",
        "node": "permission.node.5",
    }
}

我正在寻找一种方法来附加<option>字段的所有子元素(<select>标记),并将它们附加到JSON对象并如上所示。

这是我当前保存字段值的JavaScript。我需要在此处附加选项,然后将其发送到我的服务器上进行存储。

var permNodes = {};

$('#groupPermissions option').each(function(){
    permNodes.push( {"node": this.value} );
});

var perm_manager_data = {
    selected_group: $("#groupSelector").val(),
    prefix: $("#groupPrefix").val(),
    permissions: permNodes
};

$.ajax
    ({
        type: "POST",
        dataType : 'json',
        async: false,
        url: 'data/save_data.php?file=permissions_manager',
        data: { data: JSON.stringify(perm_manager_data) },
        success: function() {alert("Field data saved successfully!"); },
        failure: function() {alert("An error occured trying to save the field data!");}
    });

1 个答案:

答案 0 :(得分:1)

第一件事 您不能在具有相同名称的对象表示法中使用多个键。您至少需要将您的名称更改为:node1,node2等。您实际上是在尝试将元素推送到对象中。

2件事 您可以将选项作为节点而不是数组添加到javascript对象。像这样。

permNodes["node"+i] = this.value;

更新1 如果你真的想要json输出中的权限和数组,那么你必须做的唯一改变是:

var permNodes = [];

而不是

var permNodes = {};