Блог

У меня какое-то плохое время, когда мне нужно добавить некоторые объекты json в качестве элементов выбора внутри раскрывающегося списка, который отличается от того, где я отображаю эти объекты json.

Мне удалось получить все данные, но я не знаю, как перевести всю информацию из одного элемента в другой. В настоящее время я настроил что-то вроде этого:

Все объекты, которые поступают из моего метода JsonResult в контроллере, поступают следующим образом:

Jsonresult

и текущий формат моего выпадающего списка выглядит следующим образом:

Выбор выпадающего списка из контроллера

На данный момент я пришел к текущему состоянию: я создал массив, который хранит все мои объекты и преобразует их в теги, но по мере отладки мой массив выглядит так:

Массив из ajax в качестве тегов опций

Мой запрос 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);
                }
            });
        }
 

Мой вывод в модальном фильтре, например,:
Модальный фильтр

В этом коде: id_contrato_aplicativo-это div, в котором я храню все результаты запроса jsonresult и отображаю их в виде флажков divs с вводом и метками, с помощью этих флажков начальной загрузки документации. Мой HTML состоит из модала с параметрами фильтра с двумя полями, которые отправляют информацию контроллеру, а основной раскрывающийся список просто получает всю информацию из обычного запроса в контроллере, но я использую пользовательский класс под названием select2, который создает макет для моего приложения и генерирует раскрывающийся список с несколькими выборками в качестве элемента с каждым новым

 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');
    });
 

Мне удалось заставить его работать, выполнив привязку события к кнопке, которая получает каждый элемент моего массива уже отформатированных объектов и его идентификаторы в качестве значений из тегов.

Пример структуры массива ( из вызова 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();
        });

   });