javascript - load ajax array data into select2 dropdown format -


i have problem filling dropdown data ajax script. here's controller:

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

here's model:

public function get_nama_kota($idprov='') {     $query = $this->db->query('select id_kab, nama kabupaten id_prov = '.$idprov.' order nama asc');     return $dropdowns = $query->result(); } 

and 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> 

what i'm trying here how pass data im getting 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"}]

into dropdown dropkota. data dynamically generated when dropdown value changed.

current result:

enter image description here

select2 requires specific format can displayed in dropdown

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

how do this?

change $.ajax call below

$.ajax({     url: baseurl,     data: kota,     datatype: "json",     success: function(datas){         var s= document.getelementbyid('<element id>');         s.eampty();         $.each(datas, function(index, el) {             s.options[index]= new option(index, el);         });     },     error: function (xhr, ajaxoptions, thrownerror) {         alert("error");     } }); 

datatype: "json", respond output of ajax call in json format. replace <element id> element id want add data.

full source

<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 () {             $(".dropkota").select2({                 placeholder: "pilih kota"             });             $(".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,                     datatype: "json",                     success: function(datas){                         var s= document.getelementbyid('<element id>');                         s.eampty();                         $.each(datas, function(index, el) {                             s.options[index]= new option(index, el);                         });                     },                     error: function (xhr, ajaxoptions, thrownerror) {                         alert("error");                     }                 });             });         });     </script> </div> 

Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -