如何使用创建嵌套子HTML <div> 和HTML中的JavaScript或jQuery？

Question

我正在我的Web应用程序中设置Laravel Blade View。 如何使用JavaScript或jQuery在div中创建嵌套或循环html？ 首先，我使用的是使用select选项标签的下拉列表框，它应该在每个数据库表列之间进行迭代。

我尝试使用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 );

});