Question

作为问题的标题。这是我想要实现的。当网页加载时，我有一个网页将选项（从数据库）加载到静态选择标签。因此，只有1个静态选择标签。并且，当用户从第一个标签中选择一个选项时，应在第一个标签下生成另一个具有相同选项的选择标签，并且包含根据所选选项数据的数据表也应出现在表格中。而且，当用户从新生成的选择标签中选择一个选项时，应在选择标签下方生成另一个具有相同选项的标签，并与数据表相同。这样下去。

我正在使用laravel作为后端。并通过ajax检索了所有数据吗？

到目前为止，我已经能够从数据库中获取选项，并动态添加选项以选择标签，还可以根据静态标签中的所选选项获取数据表。

但是从第二选择标签中选择一个选项后，它没有生成另一个标签。

这是静态选择标记代码

<div class="row" id="routeDetailsRow">
        <div class="col-md-3">
            <div class="panel panel-bordered">
                <div class="panel-body">
                    <div class="form-group row">
                        <label for="routeCode" class="col-sm-4 col-form-label">Date</label>
                        <div class="col-sm-8">
                            <input type="date" name="date" id="date" class="col-sm-8 form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="routeCode" class="col-sm-4 col-form-label">Route Code</label>
                        <div class="col-sm-8">
                            <select id="selectRoute" class="form-control">

                            </select>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-bordered">
                <div class="panel-body">
                    <div id="routePlanTablediv">
                        <div id="noResultsDiv"><h4 id="noResultDivText"></h4></div>
                        <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
                        <table class="table table-bordered table-hover no-display" id="routePlanTable">
                            <thead>
                              <tr>
                                <th>Invoice No</th>
                                <th>Route Code</th>
                                <th>Customer Code</th>
                                <th>Routeplan Code</th>
                                <th>Status</th>
                              </tr>
                            </thead>
                            <tbody id="routePlanTableBody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

我正在传递静态选择标签的ID，以将选项加载到这样的标签

$(document).ready(function() {
    getUserData('selectRoute'); //this is the function and works as expected

    $("#enterVehicleNo").on("keydown", function(event) {
        $("#selectRoute").removeAttr('disabled');
    });
});

这是我使用静态选择标签获取数据表并生成新的选择标签的方法。

$(document).on('change', '#selectRoute', function() {
    var selector_id = '#selectRoute';
    var table_id = '#routePlanTable';
    getSelectedRouteDetails(selector_id, table_id); //data table function
    addRows(); //add new select tag function
});

getSelectedRouteDetails（）函数

function getSelectedRouteDetails(selector_id, table_id) {
    var selectedRC = document.getElementById(selector_id).value;
    var result = $('#' +selector_id).val().split('|');
    $('#routeplanno').text(result[1]);
    console.log(selectedRC);
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        },
        complete: function() {
            $('.lds-ellipsis').hide();
        }
    });
    $.ajax({
        url: 'retreiveRouteData',
        data: {
            RouteCode: result[0]
        },
        dataType: 'json',
        method: 'get',
        success: function(result) {
            if (result) {
                $(table_id).removeClass('no-display');
                $(table_id + ' tbody').html(result);
                $('#noResultDivText').hide();
            } else {
                $(table_id).addClass('no-display');
                $('#noResultDivText').text('No results were found !');
            }
        }
    });

}

我正在使用mustache.js生成一个新的选择标签，并且该模板与带有动态ID后跟count（selectRoute_1）的动态ID的静态选择标签相同。

addRows（）函数

var template = $("#form_rows_tpl").html(),
$target = $("#generate_new_route"),
$btnRemove = $("button.remove"),
$msg = $('.msg'),
max = 10,
count = 1,
inputRow = [];

$btnRemove.click(function(e) {
    e.preventDefault();
    removeRows();
});

var sId,tableID;
function addRows() {
    if (count <= max) {
        inputRow = {
            count: count
        }
        tableID = 'routePlanTable_1'; //hardcoded the table id and select tag id for testing purpose
        sId = 'selectRoute_1';

        var html = Mustache.to_html(template, inputRow);
        $target.append(html);
        count++;

        var routecode_selector = document.getElementsByClassName('route-code-selector');
        console.log(routecode_selector.length);
        for (var i = 0; i < routecode_selector.length; i++) {
            var select_id = routecode_selector[i].getAttribute('id');
            $('#'+select_id).removeAttr('disabled');
            newRoute(select_id,tableID);
        }
    } else {
        $msg.text('too many fields!');
    }
}

function removeRows() {
    $target.find('.row').last().remove();
    $msg.text('');
    if (count <= 1) {
        count = 1;
    } else {
        count--;
    }
}

我不了解的是如何获取动态生成的选择标签ID，并将其传递给addRows（）函数。而且我知道这是一个凌乱的代码，如果你们中的一些人有任何建议，还有其他更好的方法可以实现这一点，请在下面评论。

Answer 1

经过数小时的尝试，我能够通过添加按钮来生成新的选择标签而不是在用户选择选项后生成选择标签的方式来解决我的问题。函数应该在正确的时间和正确的函数中调用。

使用动态选项动态生成选择标签，并在选择一个选项时添加生成另一个选择标签

1 个答案: