循环使用<select>标记并将内容附加到JSON对象

Loop through a <select> tag and append the content to JSON object

本文关键字：对象 JSON select 循环      更新时间：2023-09-26

我在我的网站上有一个包含多个选择选项的<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对象中的<select>字段附加<option>值。这就是我想要的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",
    }
}

我正在寻找一种方法来附加<select>字段的所有子元素(<option>标签)，并将它们附加到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!");}
    });

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

2件你可以将这些选项以节点的形式添加到javascript对象中，而不是以数组的形式。这样的。

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

更新1 如果你真的想在json输出中设置权限和数组，那么你唯一需要做的改变是:

var permNodes = [];

代替

var permNodes = {};
相关文章：