在下拉列表中添加自定义对象作为选项

Question

我遇到了一些糟糕的情况，我需要将一些 json 对象作为 selectlistitems 附加到一个下拉列表中，该下拉列表与我显示这些 json 对象的位置不同。

我设法检索了所有数据，但我不知道如何将所有信息从一种元素转换为另一种元素。目前我设置了这样的东西：

来自控制器中我的 JsonResult 方法的所有对象都是这样的：

Jsonresult

我的下拉列表的当前格式如下：

Dropdownlist selection from controller

现在我已经达到了现在的状态： 我创建了一个数组来存储我的所有对象并将它们转换为标签，但是当我调试时我的数组看起来像这样：

Array from ajax as option tags

我的 Ajax 请求工作如下：

function GetContratosFiltro() {
        $("#id_contrato_aplicativo").empty();
        $("#ckSelecionarTdsContratosFiltro").removeAttr("disabled");
        var array_sistema = $('#id_sistema').val();
        var array_build = $('#id_build_verus').val();
            $.ajax({
                type: "POST",
                url: '@Url.Action("GetContratosFiltros")',
                dataType: "json",
                //data: "{ 'id_sistema': '"  + array_sistema + "'," + "'id_build_verus': '" + array_build + "'}",
                data: JSON.stringify({ id_sistema: array_sistema || null, id_build_verus: array_build || null }),
                contentType: "application/json; charset=utf-8",
                success: function (contratos) {
                    console.log(JSON.stringify(contratos));
                    var formoption = [];
                    content = contratos;
                    $.each(contratos, function (index, element) {
                        console.log(element);
                        var xx = $('<div class="checkbox">' +
                            '<input value="' + element.id_contrato + '" type="checkbox" name="' + element.contrato + '" class="form-check-input" id="' + index + '" checked>' +
                            '<label class="form-check-label" for="' + index + '">' + element.contrato + '</label>' +
                            '</div >');
                        $('#id_contrato_aplicativo').append(xx);
                        for (var i = 0; i < contratos.length; i++) {
                            formoption[index] = " < option value = '" + element.id_contrato + "' id='" + element.id_contrato + "' > " + element.contrato + "</option >";
                        }

                    });
                    array = formoption;
                    $("#ckSelecionarTdsContratosFiltro").prop('checked', true);
                    console.log('formoption: ' + formoption);
                    console.log('array: ' + array);
                    console.log(content);
                },
                error: function (ex) {
                    //alert('Failed to retrieve states.' + ex);
                }
            });
        }

我在过滤器模式上的输出是，例如： Modal filter

在此代码上：id_contrato_aplicativo 是一个 div，我存储来自 jsonresult 查询的所有结果，并将它们显示为带有输入和标签的复选框 div，通过此引导文档 Checkboxes。我的 HTML 包含一个带有过滤器选项的模式，其中包含两个向控制器发送信息的字段，主下拉列表只是从控制器中的常规查询中获取所有信息，但我使用的是一个名为 select2 的自定义类，它为我的应用程序创建布局和生成多选下拉列表作为每个新的元素

在下拉选择中显示为块，如下图所示：

Dropdown result

这段代码是我从 ajax 调用为每个项目生成所有标签的地方，下面是我现在正在测试的函数。

for (var i = 0; i < contratos.length; i++) {
                            formoption[index] = " < option value = '" + element.id_contrato + "' id='" + element.id_contrato + "' > " + element.contrato + "</option >";
                        }

    $('#btnTransf').click(function () {
        console.log('clicou no botão!')
        for (var i = 0; i < array.length; i++) {
            array[i].appendTo('#id_contrato select');
            $('#id_contrato').select();
            //appends to select if parent div has id dropdown
            //return !$("#id_contrato_aplicativo :checked").remove().appendTo('#id_contrato');
        }
        //return !$("#id_contrato_aplicativo :checked").remove().appendTo('#id_contrato');
    });

更新： 我设法找到了正确的元素，结果我只需要传递所有已经格式化的数组变量，所有元素都作为 id_contrato 元素内的标签。

删除无用信息

Answer 1

我已经设法通过在一个按钮上绑定一个事件来使其工作，该按钮获取我的已格式化对象数组的每个元素，并将其 id 作为标签中的值。

数组结构示例（来自 ajax 调用）：

array = []; //external variable
//put this susccess inside your call from ajax, considering a JsonResult as your controller method
success: function (contratos) {
                    console.log(JSON.stringify(contratos));
                    var formoption = [];
                    content = contratos;
                    $.each(contratos, function (index, element) {
                        console.log(element);
                        var xx = $('<div class="checkbox">' +
                            '<input value="' + element.id_contrato + '" type="checkbox" name="' + element.contrato + '" class="form-check-input" id="' + index + '" checked>' +
                            '<label class="form-check-label" for="' + index + '">' + element.contrato + '</label>' +
                            '</div >');
                        $('#id_contrato_aplicativo').append(xx);
                        for (var i = 0; i < contratos.length; i++) {
                            formoption[index] = " <option value='" + element.id_contrato + "'selected> " + element.contrato + "</option>";
                        }

                    });
                    array = formoption;
                    $("#ckSelecionarTdsContratosFiltro").prop('checked', true);
                    console.log('formoption: ' + formoption);
                    console.log('array: ' + array);
                    console.log(content);
                }

代码：

    $('#btnTransf').click(function () {
        console.log('test to check if click successful!')
        $.each(array, function (index, element) {
            console.log(element);
            $('#id_contrato').append(element);
            $('#id_contrato').select();
        });

   });