Make a combo box from ajax response

Question

So, I have a button. When I click on it, It'd retrieve ids by ajax method. While the ids are being generated, I'm using another ajax to get some data using the id's as parameter. it's basically an ajax inside an ajax response.

JS:

$("#btn_add").click(function() {
    var val_txt = $('#i_minta').find('option:selected').val().replace(/\s{2,}/g, ' ').trim();
    var val = val_txt.split("|");

    var val_no = val[0];
    var val_tgl = val[1];
    var val_kc = val[2];

    $.ajax({
        type: "POST",
        url: "<?php echo site_url('con_atk/get_minta'); ?>",
        cache: false,
        dataType: "json",
        data: {
            x: val_no /*this is the parameter to get the ID List*/
        },
        success: function(response) {
            var no = 1;
            var col_no, col_brg, col_pnh, col_mnt, col_hrg, col_tot, tableData;

            $.each(response, function(index, data) {

                var txt_harga = [];
                var select_txt = "<select id=combo_harga class='form-control'></select>";

                $.ajax({
                    type: "POST",
                    url: "<?php echo site_url('con_atk/get_harga'); ?>",
                    cache: false,
                    dataType: "json",
                    data: {
                        y: data.KodeBarang /* this is the ID to get another data */
                    },
                    success: function(outputs) {

                        $.each(outputs, function(i, value) {
                            //$('#combo_harga').append($('<option></option>').val(index).html(value.harga));
                            //txt_harga.push('<option value="'+ value.stok +'">'+ value.harga +'</option>');
                            txt_harga[i] = "<option value='" + value.stok + "'>" + value.harga + "</option>";
                        });
                        $('#combo_harga').append(txt_harga.join(''));
                    }
                });

                var rowCount = $("#t_output tbody tr").length;
                var in_kode = "<input type='hidden' id='i_kb' name='detail[" + rowCount + "][in_kb]' value='" + data.KodeBarang + "' />";
                var in_pmnh = "<input type='text' id='i_pnh' name='detail[" + rowCount + "][in_pnh]' onCopy='return false' onDrag='return false' onDrop='return false' onPaste='return false' autocomplete='off' onkeypress='return isNumber(event)' />";

                col_no = "<tr><td style='text-align:right; vertical-align:middle'>" + no++ + "</td>";
                col_brg = "<td style='text-align:left; vertical-align:middle'>" + data.KodeBarang + " " + in_kode + "<br />" + data.NamaBarang + "</td>";
                col_pnh = "<td class='mid'>" + in_pmnh + "</td>";

                col_mnt = "<td class='mid'><input type='text' id='o_pmnt' value='" + data.jumlah_minta + "' style='font-weight:bold; width:70%; text-align:right; background-color:#DE5862 !important' readonly /></td>";

                col_hrg = "<td style='text-align:right; vertical-align:middle'>" + select_txt + "</td>";
                col_tot = "<td style='text-align:right; vertical-align:middle'>xxx</td></tr>";
                tableData += col_no + col_brg + col_pnh + col_mnt + col_hrg + col_tot;

                $('#t_output tbody tr').remove();

                $('#t_output tbody').append(tableData);
            });
        }
    });
});

The end result is a table with each row has a combobox with the value of each id. Like this:

no     id      somecolumn    somecolumn        harga                                        somecolumn
1      A          xxx           xxx          value_of_A_1                                      xxx                              
2      B          xxx           xxx          value_of_B_1,value_of_B_2                         xxx
3      C          xxx           xxx          value_of_C_1,value_of_C_2,value_of_C_3            xxx

the combobox should be inside the harga column.

Thank you for your help :)

Answer 1

Hope It will success you.(it's my old code. don't worry about code format)

var as = $(this).val(); var val = as;

            as = as.replace(/\s/g, '');
            if (this.checked) {
                var a = "_" + as;
                var viewName = { viewName: a }
                var billingFieldId = '#A' + as + '_BillingCycleId';
                var vatFieldid = '#A' + as + '_VatcalculationProcessId';
                var serviceType = '#A' + as + '_ServiceType';

               $.ajax({
                        url: '@Url.Action("GetPartialView", "Customers")',
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(viewName),
                type: 'POST',
                dataType: 'html'
            }).success(function (result) {
                $('#' + as).html(result);
                if (billningCycle != null && vatCalculation != null) {
                    $.ajax({
                        url: '@Url.Action("GetCommonValue", "Customers")',
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify(viewName),
                        type: 'POST',
                        dataType: 'json',
                        success: function (data) {
                            $.each(data.BillingCycles, function (index, value) {
                                $(billingFieldId).append($('<option />', {
                                    value: value.Id,
                                    text: value.Name
                                }));

                            });

                            $.each(data.Vats, function (index, value) {
                                $(vatFieldid).append($('<option />', {
                                    value: value.Id,
                                    text: value.Name
                                }));
                            });