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

Posted 2023-04-13

【中文标题】在下拉列表中添加自定义对象作为选项

【英文标题】：Add custom object as option inside dropdownlist

【发布时间】：2021-09-03 07:21:45

【问题描述】：

我遇到了一些糟糕的情况，我需要将一些 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 元素内的标签。

删除无用信息

【参考方案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();
        );

   );