如何使用Id和Text填充数据表，但仅显示Text

Question

我有一个这样初始化的数据表：

<script>
    var selected = Array();
    var dataSet = [];
    var idSet = [];
    var rowItem = "";
    var rowIdItem = "";
    $(document).ready(function () {
        var table = $("#table").DataTable({
            "data": dataSet,
            "filter":false,
            "language": {
                "search": "",
                "searchPlaceholder": " Search"
            },
            "select": {
                "style": 'multi'
            },
            "ordering": true,
            "lengthChange": false,
            "columns": [
               { "title": "Name"},
            ],
            "responsive": true,
            "processing":true,
        }).columns.adjust()
        .responsive.recalc();
        new $.fn.dataTable.FixedHeader(table);

        $("#roleSection").on("click", "#removeRole", function (e) {
            let updatedDataSet = [];
            table.rows(".selected").remove().draw();
            table.rows().every(function (Id,Table,Row) {
                let row = this;
                updatedDataSet.push(row.data())
            });
            dataSet = updatedDataSet;
            return false;
        });

        $(document).on($.modal.AFTER_CLOSE, function (event, modal) {
            dataSet.push([rowItem]);
            idSet.push([rowIdItem]);
            table.row.add([rowItem]).draw();
            $("#modal").empty();
        });

        $(document).on("submit","#form",function (e) {
            var form_data = new FormData;
            for (var i = 0; i < idSet.length; i++) {
                var row = $("<input />").attr("type", "hidden").attr("name", "Roles[]").attr("value", idSet[i]);
                $("#form").append(row);
            }
            return true;
        });
    });
</script>

目前，如果我填充它，它仅显示项目名称，而不显示ID。

当我想向其中添加项目时，我打开一个包含以下代码的模式窗口：

    <script>
    $(document).ready(function () {
        $(document).on("submit", "#modal", function (e) {
            e.preventDefault();
            var selectedText = $("#@Html.IdFor(m=>m.RoleId) :selected").text();
            var selectedId = $("#@Html.IdFor(m=>m.RoleId)").val();
            var form_data = $(this).serializeArray();
            form_data.push({ name: "RoleList", value: dataSet });
            form_data.push({ name: "RoleName", value: selectedText});
            console.log($("#@Html.IdFor(m=>m.RoleId) :selected").text());
            console.log($("#@Html.IdFor(m=>m.RoleId)").val());
            $.ajax({
                url: "@Url.Action("VerifyRole", @ViewContext.RouteData.Values["controller"].ToString())",
                method: "POST",
                data: form_data,
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success: function (result) {
                    if (result.success) {
                        rowItem = selectedText;
                        rowIdItem = selectedId;
                        $("#close").trigger("click");
                        return;
                    }
                    $.each(result.errors, function (index, item) {
                        // Get message placeholder
                        var element = $('[data-valmsg-for="' + item.propertyName + '"]');
                        element.empty();
                        // Update message
                        element.append($('<span></span>').text(item.errorMessage));
                        // Update class names
                        element.removeClass('field-validation-valid').addClass('field-validation-error');
                        $('#' + item.propertyName).removeClass('valid').addClass('input-validation-error');
                    });
                }
            });
            return false;
        });
    });
</script>
<div class="col-sm-12">
<h2>Add Role</h2>
</div>
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "modal" }))
{
    @Html.AntiForgeryToken()
    <div class="col-sm-12">
        <div class="form-group">
            @Html.DropDownListFor(m => m.RoleId,Model.Roles)
        </div>
        <div class="form-group">
            <div class="clearfix">
                <input type="submit" id="save" value="Save" class="btn btn-primary pull-right" />
                <a href="#" id="close" class="btn btn-default pull-right" rel="modal:close">Cancel</a>
            </div>
        </div>
    </div>
}

这会将名称添加到dataSet数组，并将其id添加到idSet数组。

但是我意识到，虽然我可以将名称添加到数据表中并用ID填充一个单独的数组，但是从表中删除项目时，我无法从该数组中删除ID，然后再传递通过。有办法吗？