Как создать вложенный дочерний HTML, используя <div>и JavaScript или jQuery в HTML?

Question

Я настраиваю Laravel Blade View в своем веб-приложении.Как создать вложенный или зацикливание HTML в Div, используя JavaScript или JQuery?В первую очередь я использую раскрывающийся список с использованием тегов опций выбора, где предполагается, что они должны повторяться среди каждого из столбцов таблицы базы данных.

Я пробовал использовать JavaScript и jQuery, но он может отображать только первую итерацию.

HTML:

Filter
<div id="filterDiv">
    <div id="filterLaporan">
        <select name="kolomFilter" id="selectFilter">
        </select>
    </div>
    <select name="kondisi" id="kondisi">
        <option value="like">like</option>
        <option value="=">=</option>
        <option value="!=">!=</option>
        <option value=">">></option>
        <option value="<"><</option> 
    </select>
    <input type="text" name="valueKondisi">
    <select name="kondisiAndOr" id="andKondisi">
        <option value="">-</option>
        <option value="and">AND</option>
        <option value="or">OR</option>
    </select>
</div>                      
<div id="kondisiHeader">                        
</div>                               
<br>

JavaScript:

$("#andKondisi").on('change', function (e) {
    var dbTable = localStorage.getItem('dbTable');
    var ddlb = '';
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: "laporan/header",
        type: "POST",
        data: {
            table: dbTable
        },
        beforeSend: function () {
            $("#kondisiHeader").empty();
            ddlb = ddlb + '<br>Filter<br>';
            ddlb = ddlb + '<div id="filterDiv">';
            //alert('kondisiHeader');
        },
        success: function (result) {
            ddlb = ddlb + '<select name="filter" id="kondisiSelect">';              
            $.each(result, function (e, item) {               
            ddlb = ddlb + '<option value="' + item.column_name + '">' + item.column_name + '</option>';

            });
            ddlb = ddlb + '</select>';
            ddlb = ddlb + '<select name="kondisi" id="kondisi1">';
            ddlb = ddlb + '<option value="like">like</option>';
            ddlb = ddlb + '<option value="=">=</option>';
            ddlb = ddlb + '<option value="!=">!=</option>';
            ddlb = ddlb + '<option value=">">></option>';
            ddlb = ddlb + '<option value="<"><</option>';
            ddlb = ddlb + '</select>';                
            ddlb = ddlb + '<input type="text" name="valueKondisi1">';
            ddlb = ddlb + '<select name="kondisiAndOr" id="andKondisi1">';
            ddlb = ddlb + '<option value="">-</option>';
            ddlb = ddlb + '<option value="and">AND</option>';
            ddlb = ddlb + '<option value="or">OR</option>';
            ddlb = ddlb + '</select>';
            ddlb = ddlb + '</div>';
            ddlb = ddlb + '<div id="kondisiHeader2"></div>';

            $("#kondisiHeader").html(ddlb);                       
        } 
    });
    localStorage.setItem('dbTable', dbTable);             
});

$("#andKondisi1").on('change', function (e) {
    var dbTable = localStorage.getItem('dbTable');
    var dbTable2 = dbTable;
    var ddlb = '';
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: "laporan/header",
        type: "POST",
        data: {
            table: dbTable
        },
        beforeSend: function () {
            $("#kondisiHeader2").empty();
            ddlb = ddlb + '<br>Filter<br>';
            ddlb = ddlb + '<div id="filterDiv">';
            ddlb = ddlb + '<select name="kondisi" id="kondisi2">';
            ddlb = ddlb + '<option value="like">like</option>';
            ddlb = ddlb + '<option value="=">=</option>';
            ddlb = ddlb + '<option value="!=">!=</option>';
            ddlb = ddlb + '<option value=">">></option>';
            ddlb = ddlb + '<option value="<"><</option>';
            ddlb = ddlb + '</select>';
            alert('trello');
        },
        success: function (result) {                
            ddlb = ddlb + '<select name="filter" id="kondisiSelect2">';              
            $.each(result, function (e, item) {               
            ddlb = ddlb + '<option value="' + item.column_name + '">' + item.column_name + '</option>';

            });       
            ddlb = ddlb + '</select>';
            ddlb = ddlb + '<input type="text" name="valueKondisi2">';
            ddlb = ddlb + '<select name="kondisiAndOr2" id="andKondisi2">';
            ddlb = ddlb + '<option value="">-</option>';
            ddlb = ddlb + '<option value="and">AND</option>';
            ddlb = ddlb + '<option value="or">OR</option>';
            ddlb = ddlb + '</select>';
            ddlb = ddlb + '</div>';
            ddlb = ddlb + '<div id="kondisiHeader3"></div>';

            $("#kondisiHeader2").html(ddlb);           
        } 
    });
});

Как отобразить все возможные выпадающие списки для каждого из итоговых столбцов таблицы базы данных после выбора И, ИЛИвыбрать опцию?

Answer 1

Мой вопрос решается с помощью следующих фрагментов. Коды будут отображать каждый из всех возможных столбцов таблицы базы данных для логической цели нескольких фильтров.

HTML:

<div id="filterDiv">
    <div id="filterLaporan">
        <select name="kolomFilter" id="selectFilter">
        </select>
    </div>
    <select name="kondisi" id="kondisi">
        <option value="like">like</option>
        <option value="=">=</option>
        <option value="!=">!=</option>
        <option value=">">></option>
        <option value="<"><</option> 
    </select>
    <input type="text" name="valueKondisi">
    <select name="kondisiAndOr" id="andKondisi">
        <option value="">-</option>
        <option value="and">AND</option>
        <option value="or">OR</option>
    </select>
</div>                      
<div id="kondisiHeader">                        
</div>                               
<br>

JavaScript:

var dbTable = localStorage.getItem('dbTable');
    var ddlb = '';
    var ddlb2 = '';
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: "laporan/header",
        type: "POST",
        data: {
            table: dbTable
        },
        beforeSend: function () {
            $("#kondisiHeader").empty();
            ddlb = ddlb + '<br>Filter<br>';
            ddlb2 = ddlb2 + '<br>Filter<br>';
            ddlb = ddlb + '<div><div id="filterDiv1">';
            ddlb2 = ddlb2 + '<div><div id="filterDiv2">';                
        },
        success: function (result) {
            ddlb = ddlb + '<select name="filter1" id="kondisiSelect1">'; 
            ddlb2 = ddlb2 + '<select name="filter2" id="kondisiSelect2">'; 
            $.each(result, function (e, item) {               
            ddlb = ddlb + '<option value="' + item.column_name + '">' + item.column_name + '</option>';
            ddlb2 = ddlb2 + '<option value="' + item.column_name + '">' + item.column_name + '</option>';
            });
            ddlb = ddlb + '</select>';
            ddlb2 = ddlb2 + '</select>';
            ddlb = ddlb + '<select name="kondisi1" id="kondisi1">';
            ddlb2 = ddlb2 + '<select name="kondisi2" id="kondisi2">';
            ddlb = ddlb + '<option value="like">like</option>';
            ddlb2 = ddlb2 + '<option value="like">like</option>';
            ddlb = ddlb + '<option value="=">=</option>';
            ddlb2 = ddlb2 + '<option value="=">=</option>';
            ddlb = ddlb + '<option value="!=">!=</option>';
            ddlb2 = ddlb2 + '<option value="!=">!=</option>';
            ddlb = ddlb + '<option value=">">></option>';
            ddlb2 = ddlb2 + '<option value=">">></option>';
            ddlb = ddlb + '<option value="<"><</option>';
            ddlb2 = ddlb2 + '<option value="<"><</option>';
            ddlb = ddlb + '</select>';
            ddlb2 = ddlb2 + '</select>';               
            ddlb = ddlb + '<input type="text" name="valueKondisi1">';
            ddlb2 = ddlb2 + '<input type="text" name="valueKondisi2">';
            ddlb = ddlb + '<select name="kondisiAndOr1" id="andKondisi1">';
            ddlb2 = ddlb2 + '<select name="kondisiAndOr2" id="andKondisi2">';
            ddlb = ddlb + '<option value="">-</option>';
            ddlb2 = ddlb2 + '<option value="">-</option>';
            ddlb = ddlb + '<option value="and">AND</option>';
            ddlb2 = ddlb2 + '<option value="and">AND</option>';
            ddlb = ddlb + '<option value="or">OR</option>';
            ddlb2 = ddlb2 + '<option value="or">OR</option>';
            ddlb = ddlb + '</select>';
            ddlb2 = ddlb2 + '</select>';
            ddlb = ddlb + '</div>';
            ddlb2 = ddlb2 + '</div>';
            ddlb = ddlb + '<div id="kondisiHeader2"></div></div>';
            ddlb2 = ddlb2 + '<div id="kondisiHeader2"></div></div>';
            block_to_insert = document.createElement('div');
            block_to_insert.innerHTML = ddlb;
            container_block = document.getElementById('kondisiHeader');
            container_block.appendChild( block_to_insert );
            localStorage.setItem('ddlb2', ddlb2);
            localStorage.setItem('dbTable', dbTable);       
        } 
    });
});

$("#kondisiHeader").on('change', function (e) {
    var ddlb2 = localStorage.getItem('ddlb2');
    block_to_insert2 = document.createElement('div');
    block_to_insert2.innerHTML = ddlb2;
    container_block2 = document.getElementById('kondisiHeader2');
    container_block2.appendChild( block_to_insert2 );

});