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

Question

I'm trying to append data based on the seclect dropdown to another select. Everything works well but im finding difficulty in appending data to the second select. Any hlp help to approach it will be of much assistance

// 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 Response Data

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

First define the dropdown variable in top of ajax request after function definition .

$(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);

After posting the variable and getting in ajax , after success function , add the every variable by using this .

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

Answer 2

This is how i modified my JQUERY and worked for me, i was missing some finer details ```

     $(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);

            }
        })

    });