Tunggu Sebentar ...

Load Data Dinamis Ke Select Chosen

Ditulis oleh

Beberapa waktu lalu saya pernah catat tentang plugin jquery chosen disini. Dan beberapa hari lalu juga saya pernah catat tentang load data dari database ke select option, disini. Nah sekarang saya mau catat gabungan dari keduanya. Yaitu mengeload data dinamis ke select, tetapi dengan select chosen. Kalau ditanya dari mana dapatnya jquery chosen itu? sebenarnya sudah saya kasih link nya pada tulisan yang tentang plugin jquery, atau mau lebih cepatnya lagi kesini aja.

Pada catatan kali ini, contoh yang saya ambil adalah pemilihan kota/kabupaten dari propinsi tertentu yang dipilih.

Saya membuat 3 file, tentu selain file-file dari jquery chosen tadi.

1. koneksi.php, untuk koneksi ke database

2. index.php, untuk form nya

3. carikota.php, untuk proses pencarian kota/kabupaten dari propinsi tertentu.

Database : test.php, Tabel : propinsi, kabupaten

DROP TABLE IF EXISTS `kabupaten`;
CREATE TABLE IF NOT EXISTS `kabupaten` (
  `kabupaten_id` int(11) NOT NULL AUTO_INCREMENT,
  `propinsi_id` int(11) DEFAULT NULL,
  `kabupaten_nama` varchar(150) DEFAULT NULL,
  PRIMARY KEY (`kabupaten_id`),
  KEY `FK_kabupaten` (`propinsi_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=491 ;

DROP TABLE IF EXISTS `propinsi`;
CREATE TABLE IF NOT EXISTS `propinsi` (
  `propinsi_id` int(11) NOT NULL AUTO_INCREMENT,
  `propinsi_nama` varchar(150) DEFAULT NULL,
  PRIMARY KEY (`propinsi_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=48 ;

—
— Dumping data for table `propinsi`
—

INSERT INTO `propinsi` (`propinsi_id`, `propinsi_nama`) VALUES
(6, 'DKI Jakarta'),
(13, 'D.I Aceh'),
(17, 'Jambi'),
(20, 'Bengkulu'),
(22, 'Banten'),
(23, 'Jawa Barat'),
(24, 'Jawa Tengah'),
(25, 'D.I Yogyakarta'),
(26, 'Jawa Timur'),
(37, 'Gorontalo');

### koneksi.php

<?php
  /*******************************************
    Meload data dari database ke select option
 
    Dibuat oleh : Danni Moring
    pemrograman : PHP
    ******************************************/

   /************* Ini untuk koneksi kedatabase nya, sesuaikan **********/

   $server = "localhost";
   $user = "root";
   $pass = "";
   $db = "test";
   
 
   $database = new mysqli($server, $user, $pass, $db); 
   /*********************************************************/
?>

### index.php

<?php
  include "koneksi.php"; //menyisipkan file koneksi.php
  
  $sqlpropinsi = "select * from propinsi";
  $option = '';
  if($res = $database->query($sqlpropinsi)) {
    while ($row = $res->fetch_assoc()) {
	   $option .= "<option value='".$row['propinsi_id']."'>".$row['propinsi_nama']."</option>";
	}
  }
  /* tutup koneksinya */
  $database->close();
?>
<html>
<head>
<title>Load Data dari database ke Select Chosen</title>
<link rel="stylesheet" href="chosen/chosen.min.css">
</head>
<body>
<form id="frmdata">
<select  data-placeholder="- Pilih Propinsi -" id="propinsi" style="width:200px">
  <option value=""></option>
  <?php echo $option ?>
</select>

<select  data-placeholder="- Kota/Kabupaten -" id="kota" style="width:200px"></select>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="chosen/chosen.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*** script untuk mencari kota/kabupaten berdasarkan propinsi */

  $("#propinsi").chosen();
  $("#kota").chosen();
  $(function(){
     $("#propinsi").chosen().change(function(){
	var idprop = $("#propinsi").val();
        var html = '';
        $.ajax({
	    type: "POST",
            url: 'carikota.php',
            data: 'prop=' + idprop,
            success: function(dt) {
		    $('#kota').html(dt).trigger("chosen:updated");
            },  
	   error: function(e){  
      		alert('Error: ' + e);  
      	    }  
	 });
     });
  });
  
/****************************************************************/
</script>

</body>
</html>

### carikota.php

<?php
   include "koneksi.php"; //menyisipkan file koneksi.php
   
   $option = '<option value=""></option>';
   
   $propinsi = isset($_POST['prop']) ?  $_POST['prop'] :'';
   $sql = "select * from kabupaten where propinsi_id='".$propinsi."'";
   if($res = $database->query($sql)) {
      while ($row = $res->fetch_assoc()) {
	     $option .= "<option value='".$row['kabupaten_id']."'>".$row['kabupaten_nama']."</option>";
      }
   }
   echo $option;
   
   /* tutup koneksinya */
   $database->close();
?>

Hasilnya kira-kira seperti disini,

Ditumpuk didalam berkas : Catatan Belajar , PHP , MySQL / Mysqli
Yang berkomentar (23)
Setiap komentar yang tampil adalah hasil dari persetujuan Admin

Komentar untuk "Load Data Dinamis Ke Select Chosen"

yusuf_ricky
10-07-2017 17:09

halo mas, apakabar ? sehat kan ?

mas, mau nanya kalo ajax refresh (page refresh) ttp kondisi selected="selected" di menu option dropdown, yg sebelumnya udah dipilih gimana ya ? terima kasih

Komentar via web

Balas
Danni Moring
10-07-2017 17:55

alhamdulillah sehat......klo di url nya kayak blablala.com?prop=13, nnti di dropdownnya nyocokin pas looping propinsinya dengan id prop yang didapat dari GET.

contoh :
<?php
$idprop = isset($_GET['prop']) ? $_GET['prop'] :'0';
$datapropinsi = ambilPropinsi();
foreach($datapropinsi as $props) {
?
<option value="<?php $props['idprop'] ?>" <?php echo $props['idprops'] == $idprop echo "selected" ?>><?php echo $props['nmprop'] ?></option>
<?php
}
?>

kurang lebihnya gitu, ini sekedar contoh

Komentar via web

Balas
yusuf_ricky
11-07-2017 07:22

Kl dr yg contoh anda, apakah d taroh foreach setelah while bag. File carikota.php ?

Komentar via phone

Balas
Danni Moring
11-07-2017 09:21

klo pake foreach, ga pake while.... klo dari contoh code diatas, dan mau dihubungkan dengan contoh yang saya tulis diblog, naroknya di file index nya....karena yang di select untuk optionnya itu propinsi dalam contoh code diatas

Komentar via web

Balas
yusuf_ricky
11-07-2017 09:25

oohh..berati salah paham mas, yg ign saya tanyakan adalah bag. kota untuk set selected, karena bag provinsi sudah. kemudian ketikan sy membuat untuk load (yg di ajax cari kota) ketika saya refresh page, selalu ke default dan tdk mau set selected bagian kotanya..nnahh.. kl di ajax, set selected dari kasus contoh program anda, gmna menerapkannya ? nuhun mas, merepotkan maaf

Komentar via web

Balas
Danni Moring
11-07-2017 09:40

ini contoh realnya gimana ya ? kayak filter search bukan ? refresh page pas saat klik tombol search ? klo iya, ya sama aja cara yang kayak saya kasih contoh code diatas, diterapkan juga di kotanya...tetap di halaman index (klo ini merujuk dari contoh yang di blog)......

Komentar via web

Balas
yusuf_ricky
11-07-2017 09:50

planetwedding.net/latihan/filter/filter.php
ini adalah contoh pengembangan dr belajar sy di blog anda, ketika sy cb dengan search, pencarian untuk kotanya, tidak bs set selected mas.

malah kembali ke default (pilih kota/kabupaten ketika page refresh berjalan). hikkks...

Komentar via web

Balas
Danni Moring
11-07-2017 09:58

coba kayak gini (ini beradsarkan dari contoh di blog)
<?php
$idprop = isset($_GET['propinsi']) ? $_GET['propinsi']:0;
$idkota = isset($_GET['kota']) ? $_GET['kota']:0;
$sqlpropinsi = "select * from propinsi";
$option = '';
if($res = $database->query($sqlpropinsi)) {
while ($row = $res->fetch_assoc()) {
if($row['propinsi_id'] == $idprop) {
$selected = "selected";
} else {
$selected = '';
}
$option .= "<option value='".$row['propinsi_id']."'".$selected.">".$row['propinsi_nama']."</option>";
}
}
$optionkota = '';
if($idprop > 0) {
$sql = "select * from kabupaten where propinsi_id='".$idprop."'";
if($res = $database->query($sql)) {
while ($row = $res->fetch_assoc()) {
if($row['kabupaten_id'] == $idkab) {
$selected = "selected";
} else {
$selected = '';
}
$optionkota .= "<option value='".$row['kabupaten_id']."'>".$row['kabupaten_nama']."</option>";
}
}
}
?>
<form id="frmdata" method="GET">
<select data-placeholder="- Pilih Propinsi -" id="propinsi" name="propinsi" style="width:200px">
<option value=""></option>
<?php echo $option ?>
</select>

<select data-placeholder="- Kota/Kabupaten -" id="kota" name="kota" style="width:200px">
<option value=""></option>
<?php echo $optionkota ?>
</select>
<button type="submit">Search</button>
</form>

utk jquerynya sama aja kayak di blog.... code diatas itu untuk mendeteksi apakah ada parameter GET propinsi dan kabupaten... klo ada maka di looping mengambildata berdasarkan masing2.....ini fungsinya saat tombol search (atau submit) dia kirim parameter GET dan lalu ditampung

Komentar via web

Balas
yusuf_ricky
11-07-2017 10:07

oke mas, terima kasih...tak cb dulu ya. anda sarapan dl aja

Komentar via web

Balas
yusuf_ricky
06-07-2017 09:49

sebenarnya kalo untuk sistem yang tidak me load data di javascript , seperti file saya (https://pastebin.com/iLVtqdaM)

bisa berfungsi dengan baik, masalahnya kalo misal load data dengan kecamatan, dll dengan data banyak itu bikin load data lemot.
mohon pencerahannya y gan, udah posing nih.hehe..

oo..ya sy tdk tau dengan web/blog anda, tp anda selalu me-reply koment menjadi 3 (cb perhatikan)

Komentar via web

Balas
Danni Moring
06-07-2017 15:26

load datanya berupa json coba, jadi yang diambil data jsonnya, lalu di jquery nya nanti baru di append html option nya....

iya jaringannya euy, jadi sekaligus 3.... thanks udah info...soalnya biasanya habis balas komentar, langsung tutup lagi

Komentar via web

Balas
Danni Moring
06-07-2017 15:33

itu code yang dibuat sekaligus ngeload semua data (propinsi, kabupaten, dan kecamatan ?) klo iya, ya memang berat..karena saat halaman di load, malah ditampilkan semua data yang semestinya ga harus di load tapi malah di load..... udah coba contoh saya ? tapi kalau kendalanya hanya soal allow single deselect, kayaknya itu bukan kendala utama bukan ? setidaknya masih bisa load sesuai yang diinginkan (misal propinsi jakarta, maka otomatis load kabupaten/kotamadya yang dijakarta aja, nanti pilih kabupaten/kotamadya yang dijakarta, misalnya jakarta selatan, maka otomatis ngeload kecamatan yang ada di jakarta selatan).. itu jauh lebih ringan..karena yang diambil ya dibutuhkan aja

Komentar via web

Balas
yusuf_ricky
06-07-2017 15:35

saya sebenarnya bkn programer murni, sy mengerti css, sy mengerti bootsrap, saya mengerti framwork, php semua jd 1 jadi ane "ngerti" nya ngerti ngertian.hehe..

bagaimana bl penggunaanya dgn JSON spt yg anda jelaskan ? kl key google apa mas ?

Komentar via web

Balas
Danni Moring
06-07-2017 15:40

caranya hampir sama dengan contoh saya, tetap di load di jquerynya.... nanti akan ketemu juga kendala allow single deselect yang select option berikutnya ga berfungsi (dalam contoh ini berarti select kota, kecmatan ga berfungsi allow single deselect, sedangkan select propinsi fungsi allow single deselect nya berungsi ), lebih tepatnya belum tahu caranya, karena belum sempat ngoprek lagi....

utk di google, coba aja search load json jquery...

Komentar via web

Balas
Danni Moring
06-07-2017 15:41

btw dengan codemu tadi, itu bukannya tampilkan semua data ya ? jadi si user akan tetap lihat data kota itu banyak meski yang dipilihnya misalnya "jakarta", tapi di select kota nya yang ditampilkan itu bukan dari jakarta aja..

itu memang harus pakai allow single deselect utk chosen nya ?

Komentar via web

Balas
yusuf_ricky
06-07-2017 18:44

Utamanya adlh allow single deselect karena, kl lebih jauh sy pgn buat fikter (contoh bukalapak, cari produk, filter provinsi, kota)
Namun kasus sy lebih luas sy tmbhkan kec. Dan kelurhn...

Komentar via phone

Balas
Danni Moring
06-07-2017 21:52

sorry, untuk komen sebelumnya tidak saya tampilkan krn ada no kontak, menghindari yang tidak-tidak, jadi ga saya publish komenmu..

itu fungsinya hanya buat filter beberapa select option aja kan ? mmmhhh bisa dijelaskan lebih spesifik lagi ga kenapa harus pake allow single deselect ? karena saya juga pernah buat filter beberapa select option, bisa jalan juga meski ga pake allow single deselect.

Komentar via web

Balas
Danni Moring
06-07-2017 21:58

atau lebih gampangnya gini, jika filter yang model beberapa select itu dibuat pake chosen dan ga memakai allow single deselect apakah tidak bisa jalan filternya ?

Komentar via web

Balas
yusuf_ricky
07-07-2017 04:35

intinya sy ign buat user freandly sih...

saya ign buat kek bukalapak, solusi lain bs sbnrnya pake modal kek olx.co.id pencarian filter wilayah.
tp mungkin sy pake ini dl mas. tutorial yg anda mangsud untuk select filter chosen tsb nga ada y di blog anda ?

Komentar via web

Balas
yusuf_ricky
06-07-2017 07:03

Ini file saya gan:

index.php (https://pastebin.com/f9Z6vgkL)
loadData.php (https://pastebin.com/GcF4RMjW)

Dan ini bag. script saya gan

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js"></script>

<script type="text/javascript">
$("#propinsi").chosen({allow_single_deselect: true});
$("#kota").chosen({allow_single_deselect: true});
$(function(){
$("#propinsi").chosen().change(function(){
var idprop = $("#propinsi").val();
var html = '';
$.ajax({
type: "POST",
url: 'loadData.php',
data: 'prop=' + idprop,
success: function(dt) {
$('#kota').html(dt).trigger("chosen:updated");
},
error: function(e){
alert('Error: ' + e);
}
});
});
});
</script>

#TerimakasihSebelumnya

Komentar via phone

Balas
Danni Moring
06-07-2017 09:43

iya memang saya lihat di forum chosen-nya ada yang kasusnya sama, allow_single_deslect nya ga bekerja di select dynamic..untuk sekarang saya belum tahu caraya, nanti kalau sudah dapat, mungkin kalau ada waktu saya post di blog

Komentar via web

Balas
yusuf_ricky
05-07-2017 17:08

Halo gan, semoga anda dan keluarga sehat sll.,,

sangat membantu, tp saya ingn bertanya, saya menambahkan jquery chosen (untuk ini: {allow_single_deselect: true}) yakni bagian pojok kanan tanda X untuk men-delete agar form menjadi Empty atau -pilih provinsi-

Tapi kenapa hal ini hanya berfungsi di bag. provinsi ya ? sementara pada form yg ign sy beri X sbg pen-delete data di form tidak nonggol pd kolom kota ? **semoga penjelasan sy bs dimengerti.hehe.. terima kasih, mohon balasannya

Komentar via web

Balas
Danni Moring
06-07-2017 00:02

terimakasih atas doanya, semoga Anda dan keluarga sehat juga....

mmhh harusnya sih bisa....gimana memangnya code yang sudah dibuat ?

Komentar via web

Balas


Mau dapat tambahan dollar dengan kemampuan desainmu ? ayo salurkan bakat desainmu dengan mengupload desain yang kamu buat dan bisa menghasilkan pendapatanmu jika desain kamu laku terjual di produk teepublic. Klik disini untuk register. Semoga sukses ya