Tambah Data Dropdown dengan jQuery PHP

Suatu hari ketika sedang mengerjakan proyek website, ada-ada saja yang diinginkan klien. Mulai dari minta yang sederhana sampai rumit sekalipun. Tapi ongkosnya tambah dong. Ok ini adalah permintaan dari klien yang ingin membuat combobox dropdown yang ada fasilitas tambah data ke dropdown. Nah yang diinginkan adalah setelah di tambahkan data otomatis data yang sudah diinput itu terseleksi. Kebayang ga? Kalo belum ikuti aja tutor berikut biar kebayang :p

Update terakhir dari si klien adalah tidak boleh ada penggantian halaman pada saat input data kota. Wah positif AJAX nih. (mikir dulu solusinya). Aha akhirnya dapat solusinya setelah semedi 7hari 7malam saat bulan ke 7. Daripada di pendam sendiri mendingan ku bagi dengan kalian. Eits jangan senang dulu, soalnya yang asli ku sembuyikan, ini hanya cuplikan dari potongan baris. Sebagai contoh buat dulu file prosesnya. Disini yang dipakai cuma 1 file yaitu something.php.

Nih potongan serverside prosesnya (udah kenal php kan, kalo belum silakan baca dulu tutornya). Intinya nih script ngejelasin nampilin array yang bakal ditampilin di dropdown combobox.

<?php

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{if(isset($_POST)){
 $_name = $_POST['nama'];
 $_detail = $_POST['detail'];
 $places['area'][$_name]=$_detail;
 $places['selected']=$_name;
 echo json_encode($places);
 exit;
 }
}
$places['area'] = array('0'=>'Pilih','JKT'=>'Jakarta','BDO'=>'Bandung','MAT'=>'Mataram');
$places['selected']='0';
?>

Kalo yang ini jangan lupa ditambahin. jquery ama jqueryUI wajib hukumnya. Kalo belum punya cari di google key: jquery dan jqueryui. Nah download semuanya.

<link href="/jui/css/smoothness/jquery-ui-1.9.0.custom.css" rel="stylesheet">
 <script src="/jui/js/jquery-1.8.2.js"></script>
 <script src="/jui/js/jquery-ui-1.9.0.custom.js"></script>
 <script>

Next, Insialisasi dulu dialogbox dari jqueryUI

 
  $( "#dialog" ).dialog({
   autoOpen: false,
   resizable:false,
   modal:true,
   width: 400,
   buttons: [
    {
     text: "Ok",
     click: function() {
      $( this ).dialog( "close" );
      addCity();
     }
    },
    {
     text: "Cancel",
     click: function() {
      $( this ).dialog( "close" );
     }
    }
   ]
  });

Nah kalo ada orang ngeklik (Event) tombol "add" maka dialogbox akan dibuka

 
$( "#add" ).click(function( ) {
   $( "#dialog" ).dialog( "open" );
  });

Jangan lupa membuat fungsi penambahan kota

 
 function addCity(){
  $.ajax({
   url:$(this).location,
   type:'POST',
   data:$('form#regist-kota').serialize(),
   dataType:'json',
   success:function(data,b,c){
    $('#combo:selected').removeAttr('selected');
    $.each(data.area,function(a,b){
     $('#combo').append(
      $('<option></option>').val(a).text(b).attr("selected","selected")
     );
    });
   },
   error:function(a,b,c){
    console.log(a.status,c);
   }
  });
 }
 

Nah ini formnya sudah siap

 
<form id="form-one" method="post" style="padding:1em; background:#f5f5f5; border-radius:5px; width:200px;border:1px solid #ececec">
<select id="combo" name="combo">
 <?php 
  foreach($places['area'] as $place=>$detail)
  {
   if($place===$places['selected'])
    $sel = 'selected="selected"';
   else
    $sel = null;
    
   echo '<option value="'.$place.'" '.$sel.'>'.$detail.'</option>';
  }
 ?>
</select> <input type="image" id="add" value="+" src="add.png" />

<span style="display:block"><input type="submit" id="submit-form" /></span>
</form>

<div id="dialog" style="width: auto; min-height: 55px; height: auto;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">
 <p><form id="regist-kota">Kode Kota <input type="text" name="nama" />Nama Kota<input type="text" name="detail" /></form></p>
</div>

Gimana mau kan?Nah itu trik sederhana menambahkan dropdown data secara on the fly