Javascript 使用DataTable JSON填充下拉列表

我需要用数据表中的值填充下拉列表

我的数据表是通过点击按钮加载的，然后用户可以在该数据表中更新记录。此数据中有一个“订单号”。我需要所有现有订单号来填充下拉列表，当用户单击“编辑”按钮时显示该列表，但我不确定如何以及在何处放置代码

jQuery获取并填充表

// JSON GET to populate 'Existing Rules' section
var addModifyDeleteButtonClick = function () {
    $('#toDrForm').trigger('reset');
    $('#todrexitingrules').show();
    $('#dialPlanTelNo').html(telNumberSelected);

    if (buttonclicked == 'Modify' || buttonclicked == 'Add') {
        $("#existingRuleSectionHeader").html('Existing dial plan rules');
    } else {
        $("#existingRuleSectionHeader").html('Delete an existing dial plan rule');
    }

    // Existing rule datatable creator
    var existingRuleTable = $('#existingRulesDataTable')
        .on('error.dt', function () {
            $('#todrexitingrules').hide();
            $('#errorModal').modal('show');
            $('#errorModal').on('shown.bs.modal', function () {
                $('#errorModalCloseButton').focus();
            })
            $('#existingRuleError').html(
                '<p>There was an issue retrieving the data. Please try again.</p>'
                + '<p>If the error keeps occurring, please get in touch.</p>');
        })
        .DataTable({
            "ordering": false,                                      // Allows ordering
            "searching": false,                                     // Searchbox
            "paging": true,                                         // Pagination
            "info": false,                                          // Shows 'Showing X of X' information
            "pagingType": 'simple_numbers',                         // Shows Previous, page numbers & next buttons only
            "pageLength": 10,                                       // Defaults number of rows to display in table. If changing this value change the show/hide below
            "dom": '<"top"f>rt<"bottom"lp><"clear">',               // Positions table elements
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],  // Sets up the amount of records to display
            "fnDrawCallback": function () {
                if ($('#existingRulesDataTable').DataTable().rows().count() < 11) {
                    $("div[class='bottom']").hide();                // Hides paginator & dropdown if less than 11 records returned
                } else {
                    $("div[class='bottom']").show();                // Shows paginator & dropdown if 11 or more records are returned
                }
            },
            'ajax': {
                "type": 'GET',
                "url": "js/dataTable.json",                         // TODO > Needs to be changed when actual file resolved
                "data": function (data) {
                    return data;
                },
                "dataSrc": function (res) {
                    existingRuleTableCount = res.data.length;
                    return res.data;
                },
                "dataType": 'json',
            },
            "columns": [                                            // Display JSON data in table
                { "data": "position" },
                { "data": "startTime" },
                { "data": "endTime" },
                { "data": "selectedDays" },
                { "data": "selectedDates" },
                { "data": "selectedMonths" },
                { "data": "timeRange" },
                {
                    "data": null,
                    "render": function (data) {
                        if (buttonclicked == 'Modify') {           // Displays the radio button when 'Mod' clicked
                            return '<label class="c-radio" style="margin-bottom: 0px">'
                                + '<input type="radio" name="existingRuleActionRadioButton" value="option1">'
                                + '<span class="fa fa-check"></span>'
                                + '</label>';
                        } else if (buttonclicked == 'Delete') {    // Displays the delete button when 'Del' clicked
                            return '<button name="deleteRuleButton" class="btn btn-danger">'
                                + '<i class="fa fa-trash-o" style="font-size: large"></i>'
                                + '</button>';
                        } else {
                            return '';                             // Needed for the 'Add' button click
                        }
                    }
                },
            ],
            "createdRow": function (row, data, dataIndex) {
                if (data.startTime == 'Anytime') {
                    $('td:eq(1)', row).attr('colspan', 2).css('text-align', 'center').html('All day');  // Adds COLSPAN attribute, centers the wording and changes it from 'Anytime'
                    $('td:eq(2)', row).css('display', 'none');                                          // Hides cell next to the cell with COLSPAN attribute
                }

                if (data.timeRange == '-w') {
                    $('td:eq(6)', row).html('Working hours');       // Changes text returned by JSON if '-w'
                } else if (data.timeRange == '-oo') {
                    $('td:eq(6)', row).html('Out of office hours'); // Changes text returned by JSON if '-oo'
                }
            },
            "initComplete": function () {
                if (buttonclicked == 'Delete') {
                    $('button[name=deleteRuleButton').focus();
                } else if (buttonclicked == 'Modify') {
                    $('input[name=existingRuleActionRadioButton').focus();
                }

                $(this.api().cell(':last', 7, { order: 'original' }).node()).css('display', 'none');
            },
            "destroy": true
        });

    // Function call when a radio button is selected from existing rule table
    $('#existingRulesDataTable').on('click', 'input[type="radio"]', function (event) {
        event.stopImmediatePropagation();
        var modifyRecordData = existingRuleTable.row($(this).closest('tr')).data();
        modifyRadioButtonSelection(modifyRecordData);
    });
}

函数调用，当选择了某个单选按钮时调用，该单选按钮是预pop的编辑窗体

// Disables other radio buttons when one selected for 'Modify'
var modifyRadioButtonSelection = function (modifyRecordData) {
    $('select[name=existingRulesDataTable_length').attr('disabled', true);
    $('input:radio[name="existingRuleActionRadioButton"]').attr('disabled', true);
    $("#ruleBuilder").show();
    removeValidation();
    $("#ruleBuilderHeader").html('Modify an existing dial plan rule');
    $('#startTimeHr').focus();
    $("#resetButton").css("display", "inline");

    $('button[name=weekdaysbutton').removeClass('btn-primary').addClass('btn-default');
    $('button[name=weekenddaysbutton').removeClass('btn-primary').addClass('btn-default');
    $('button[name=monthday').removeClass('btn-primary').addClass('btn-default');
    $('button[name=month').removeClass('btn-primary').addClass('btn-default');

    addDisable();

    // Populates fields with data passed
    if (modifyRecordData.startTime == 'Anytime') {
        $('#anyTimeRadioButton').prop('checked', true);
        $('#specificTimeRadioButton').removeAttr('checked');
        $('#startEndTimeFields').hide();
    } else {
        $('#anyTimeRadioButton').removeAttr('checked');
        $('#specificTimeRadioButton').prop('checked', true);
        $('#startEndTimeFields').show();
        $('#startTimeHr').val(modifyRecordData.startTimeHr);
        $('#startTimeMin').val(modifyRecordData.startTimeMin);
        $('#endTimeHr').val(modifyRecordData.endTimeHr);
        $('#endTimeMin').val(modifyRecordData.endTimeMin);
    }

    $('#orderPosition').val(modifyRecordData.position);
    $('#timeRange').val(modifyRecordData.timeRange);

    var selectedDays = modifyRecordData.selectedDays;
    var splitSelectedDays = selectedDays.split(',');
    var selectedDates = modifyRecordData.selectedDates;
    var splitSelectedMonthDates = selectedDates.split(',');
    var selectedMonths = modifyRecordData.selectedMonths;
    var splitSelectedMonths = selectedMonths.split(',');

    // Loops though and pre-selects current days passed in
    splitSelectedDays.forEach(day => {
        let dayName = day.trim().toLowerCase();
        $('#' + dayName).toggleClass('btn-default btn-primary');

        if (dayName == 'all days') {
            $('button[name=weekdaysbutton]').toggleClass('btn-default btn-primary');
            $('button[name=weekenddaysbutton]').toggleClass('btn-default btn-primary');
        }
    })

    // Loops though and pre-selects current month dates passed in
    splitSelectedMonthDates.forEach(monthDate => {
        let monthDateValue = monthDate.trim();
        let padZeroMonthDateValue = (monthDateValue < 10 ? "0" : "") + (monthDateValue);

        $('#' + padZeroMonthDateValue).toggleClass('btn-default btn-primary');

        if (padZeroMonthDateValue == 'All days of the month') {
            $('button[name=monthday').toggleClass('btn-default btn-primary');
        }
    })

    // Loops though and pre-selects current months passed in
    splitSelectedMonths.forEach(month => {
        let monthName = month.trim().toLowerCase();

        $('#' + monthName).toggleClass('btn-default btn-primary');

        if (monthName == 'all months') {
            $('button[name=month]').toggleClass('btn-default btn-primary');
        }
    })

    $('#resetButton').mousedown(function (event) {
        buttonclicked = "Reset";
        event.stopImmediatePropagation();
        modifyRadioButtonSelection(modifyRecordData);
    })
};

这是我的HTML

<select id="orderPosition" name="orderPosition"
    class="form-control">
    <option value="orderPositionDefault">
        Please select a position
    </option>
</select>

我需要下拉列表来填充所有返回的“位置”号，如下所示

方法与and一起返回required列中的一组唯一记录，您可以使用这些记录填充下拉列表的值