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:
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
Post a Comment