select2 未正确显示数组数据答案

【问题标题】：select2 not displaying array data properlyselect2 未正确显示数组数据
【发布时间】：2016-08-24 09:10:54
【问题描述】：

我有这个功能来生成数据

public function ajax_get_kota($idProv='')
{
    $kota = $this->registrasi_model->get_nama_kota($idProv);
    // echo json_encode(array_values($kota));
    $data = array();
    foreach($kota as $k){
        $data[] = '{id:'.$k->id_kab.','.'text:'.$k->nama.'}';
        // echo "{id: $k->id_kab, text: '$k->nama'}";
    }
    echo json_encode(array_values($data));
}

这样的返回值

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

我希望上面的那些值将显示在我的下拉列表中：这是代码：

<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){
                        console.log(datas);
                        $(".dropKota").select2({
                            placeholder: "Pilih Kota",
                            data: datas //the data loads here
                        });                        },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert("error");
                    }
                });
            });
        });
    </script>
</div>

我该如何解决这个问题。

【问题讨论】：

标签： javascript php ajax select2

【解决方案1】：

我不知道 select2 期望什么样的对象/数组，但看起来您从 php 发送的 json 没有被解析。

所以首先你应该改变它：

$.ajax({
                url: baseUrl,
                // set the dataType so that jQuery will parse the json automatically
                dataType: 'json',
                data: kota,
                success: function(datas){
                    console.log(datas);
                    ...

现在您将向select2 发送一个对象数组，这可能非常接近您的需要。

【讨论】：

如果我使用dataType: 'json'，所有数据都会变成[object Object]。我刚刚发现select2 使用数组格式id:123,name:abc 所以如果我将id_kab 更改为id 和nama 为name 并将数据放入select2 函数中，它将起作用。但这些数据来自数据库我如何格式化它以便select2 可以接受？
@HealMee 这就是我使用console.log() 而不是alert() 的原因。关于数据的内容，您只需要在 php 中循环您的 $kota 变量并将正确的元素与正确的键添加到新数组中。该数组您可以json_encode 并发送回 javascript。
我使用了console.log() 并更新了我的代码，现在我需要从生成的数据中删除["{ 之间的"。我该怎么做？

【解决方案2】：

您需要从 PHP 返回 JSON 响应，并且需要在 AJAX 请求中指定 JSON 数据类型。

所以你的 PHP 代码看起来像这样，

public function ajax_get_kota($idProv='')
{
    $kota = $this->registrasi_model->get_nama_kota($idProv);
    $data = array();
    header('Content-Type: application/json');
    echo json_encode(array_values($kota));
}

AJAX 看起来像这样，

$.ajax({
                    url: baseUrl,
                    data: kota,
                    dataType: 'json',
                    success: function(datas){
                        // alert(datas);
                        $(".dropKota").select2({
                            placeholder: "Pilih Kota",
                            data: datas //the data loads here
                        });                        },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert("error");
                    }
                });

【讨论】：

【解决方案3】：

对php不太了解，但对我来说代码：

$("#dropdownId").select2("val", "your value");

正在使用 jsp 页面（java web 项目）中的 jquery js 在 select2 下拉列表中选择一个值。

【讨论】：