javascript - 将 ajax 数组数据加载为 select2 下拉格式

Question

我在使用 ajax 脚本填充下拉数据时遇到问题。这是我的 Controller :

public function ajax_get_kota($idProv='')
{
    $kota = $this->data['namaKota'] = $this->registrasi_model->get_nama_kota($idProv);
    echo json_encode($kota);
}

这是我的模型:

public function get_nama_kota($idProv='')
{
    $query = $this->db->query('SELECT id_kab, nama FROM kabupaten WHERE id_prov = '.$idProv.' ORDER BY nama ASC');
    return $dropdowns = $query->result();
}

和 View :

<div class="form-group form-group-sm has-feedback <?php set_validation_style('Kota')?>">        
    <?php echo form_label('Kota / Kabupaten', 'kota', array('class' => 'control-label col-sm-2')) ?>
    <div class="col-sm-3">
       <?php
            $atribut_kota = 'class="form-control dropKota"';
            echo form_dropdown('Kota', $namaKota, $values->Kota, $atribut_kota);
            set_validation_icon('Kota');
        ?>
    </div>
    <?php if (form_error('Kota')) : ?>
        <div class="col-sm-9 col-sm-offset-3">
            <?php echo form_error('Kota', '<span class="help-block">', '</span>');?>
        </div>
    <?php endif ?>

    <script>
        $(document).ready(function () {
            $(".dropProv").on("change", function(){
                var idProv = $(this).val();
                var baseUrl = '<?php echo base_url(); ?>program/administrasi/registrasi/ajax_get_kota/'+idProv;
                var kota = [];
                $.ajax({
                    url: baseUrl,
                    data: kota,
                    success: function(datas){
                        $(".dropKota").select2({
                             placeholder: "Pilih Kota",
                             data: datas
                        });
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert("error");
                    }
                });
            });
        });
    </script>
</div>

我在这里要做的是如何传递我从 ajax 获得的数据:

[{"id_kab":"5103","nama":"KAB. BADUNG"},{"id_kab":"5106","nama":"KAB. BANGLI"},{"id_kab":"5108","nama":"KAB. BULELENG"},{"id_kab":"5104","nama":"KAB. GIANYAR"},{"id_kab":"5101","nama":"KAB. JEMBRANA"},{"id_kab":"5107","nama":"KAB. KARANGASEM"},{"id_kab":"5105","nama":"KAB. KLUNGKUNG"},{"id_kab":"5102","nama":"KAB. TABANAN"},{"id_kab":"5171","nama":"KOTA DENPASAR"}]

进入下拉dropKota。这些数据是在另一个下拉值更改时动态生成的。

当前结果:

select2 需要特定的格式才能在下拉列表中正确显示

var data = [{ id: 0, text: 'enhancement' } //something like this

我该怎么做？

Answer 1

你必须这样做:

 $.ajax({
                url: url,
                type: "POST",
                async: false,
                data: {id: id},
                success: function(data) {
                    var data_array = $.parseJSON(data);
                    $.each(data_array.emp, function(key, value) {
                        $('#Your_drop_down_id').append($('<option>', {
                            value: key,
                            text: value,
                        }));
                    });

                }
            });

你必须解析数据(JSON 到数组)然后使用 $.each 循环所有值。