动态生成带有动态选项的选择标签，并在选择选项时添加生成另一个选择标签

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 后跟计数 (selectRoute_1)

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

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