如何使用 jquery 附加数据以形成集体选择 optgroup 标签

Question

我正在尝试将基于 seclect 下拉列表的数据附加到另一个选择。 一切正常，但我发现将数据附加到第二个选择时遇到困难。 任何帮助接近它的帮助都会有很大帮助

// The select that initiates onchange
{!! Form::select('item_inventory', array(1 => 'Asset', 2 => 'GL'), null, ['id'=> 'item-modules', 'class' => 'form-control de-account-select2', 'placeholder' => trans('general.form.select.field', ['field' => trans_choice('general.items', 1)])]) !!}

//The data that should be updated on response success
{!! Form::select('item[' . $item_row . '][name]', array(1=>'asset 1'),  null, ['id'=> 'item-name-' . $item_row, 'class' => 'form-control', 'placeholder' => trans('general.form.select.field', ['field' => trans_choice('general.accounts', 1)])]) !!}

//JQuery code
$(document).on('change', '#item-modules', function () {

            $.ajax({
                url: "{{url('expenses/Accounts') }}",
                type: 'GET',
                dataType: 'JSON',
                data: 'item_module_id=' + $(this).val(),
                headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                success: function (data) {
                    let json = data.accounts;
                    console.log(json);
                    let html = "";
                    for (let option in json) {
                        html += `<optgroup label="` + option + `">`;
                        json[option].forEach(function (item) {
                            html += `<option value="` + 
                    item["Attrib_value"] + `" >` + item["Attrib_value"] + `</option>`
                        });
                        html += `</optgroup>`;
                    }

                    $('#item-name-' + item_row).html(html);
                 }
               });

Console.log 响应数据

Depreciation:
41: "700 - Depreciation"

Direct Costs:
20: "500 - Costs of Goods Sold"

Expense:
21: "600 - Advertising"
22: "605 - Bank Service Charges"
23: "610 - Janitorial Expenses"
24: "615 - Consulting & Accounting"

Answer 1

首先在函数定义之后在ajax请求顶部定义下拉变量。

$(document).on('change', '#item-modules', function () {
let dropdown = $('#id_of_second_select');
dropdown.empty();
dropdown.append('<option selected="true" disabled>Set default select</option>');
dropdown.prop('selectedIndex', 0);

发布变量并进入ajax后，在成功函数之后，使用this添加每个变量。

$.each(json, function (key, entry) {
    dropdown.append($('<option></option>').attr('value', entry).text(key));
})

Answer 2

这就是我修改我的 JQUERY 并为我工作的方式，我错过了一些更精细的细节```

     $(document).on('change', '#item-modules', function () {

        $.ajax({
            url: "{{url('expenses/Accounts') }}",
            type: 'GET',
            dataType: 'JSON',
            data: 'item_module_id=' + $(this).val(),
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
            success: function (data) {
                let json = data.accounts;

                let newDropdown = '';
                for (let option in json) {
                    newDropdown += `<optgroup label="` + option + `">`;
                    $.each(json[option], function (key, item) {
                        newDropdown += `<option value="` + key + `" >` + item + `</option>`
                    });
                    newDropdown += `</optgroup>`;
                }
                $('#item-name-'+String(item_row-1)).append(newDropdown);

            }
        })

    });