Cara menggunakan select option otomatis php

Question

Home
PHP MYSQLi
Edit Data Combobox Terpilih di Form Edit PHP MYSQL

Tutorial kali ini kita akan membuat Edit Data componen field Combobox, Yang dimana Value Combobox akan otomatis terpilih saat form edit.. Ini adalah contoh kecil Cara edit data combobox di sebuah form tanpa database :

Namun anda jangan khawatir.. untuk studi kasus permasalahan Cara Menampilkan data di combobox terpilih berdasarkan data dari database.. saya sudah tulis pada tutorial dibawah ini. silahkan disimak ya.

Berikut contoh scriptnya , Misalkan kita mempunyai data Selectbox/ combobox Jenis Kelamin, yang tentunya terdiri dari Laki-Laki dan Perempuan , maka contoh script nya akan sperti ini

<select name='jk' class='form-control'>
 <option value='L' size='20'>Laki-Laki</option>
 <option value='P'>Perempuan</option>
 </select>

Bagaimana Membuat Edit Data di Combobox , agar Jika data nya Laki-Laki , maka akan otomatis terpilih Laki-Laki ...? begitu juga sebaliknya..???

Untuk Edit datanya , karena datanya bukan dari database, makan kita bisa menggunakan fungsi if ,berikut Script nya :

$edit=$mysqli->query("SELECT * FROM anggota WHERE id_anggota='$_GET[id]'");
$r=$edit->fetch_array(); <select name='jk' class='form-control'>
 if ($r['jk']=='L'){
 echo "<option value='L' size='20' selected>Laki-Laki</option>
 <option value='P'>Perempuan</option>";
 }else{
 echo "<option value='L' size='20' >Laki-Laki</option>
 <option value='P' selected>Perempuan</option>";
 }
 echo "</select>";

Pada contoh di atas kita menggunakan fungsi if pada PHP untuk mencocokan dengan data kita, dan kemudian kita tambahkan atribut selected , agar data langsung terpilih.

Nah.. Bagaimana Jika data yang diambil di database , dari tabel yang berbeda ... ???

akan saya tulis tutorialnya.. jika dibutuhkan.. thanks

Nah.. Karena Ada yang bertanya bagaimana Menampilkan Edit Data Combobox Berdasarkan Database.. disini contohnya

$tampil=mysqli_query($konek,"SELECT * FROM golongan WHERE aktif='Y'");
 if ($r[id_golongan]==0){
echo "<option value=0 selected>- Pilih Kategori -</option>"; }                                while($w=mysqli_fetch_array($tampil)){
       if ($r[id_golongan]==$w[id_golongan]){
 echo "<option value=$w[id_golongan] selected>$w[golongan]</option>";}
        else{
 echo "<option value=$w[id_golongan]>$w[golongan]</option> </p> ";}}

Dari kueri diatas kita mencocokkan terlebih dahulu , berdasarkan id nya, script agak panjang, disini saya memiliki script yang cukup simple lagi, berikut scriptnya

 echo "<select name='id_jurusan' class='form-control'>
 <option value='' size='20' disabled>Pilih Jurusan</option>";
 $sql = $mysqli->query("SELECT * FROM jurusan ORDER BY jurusan");
 while ($e=$sql->fetch_array()){
 if ($r['id_jurusan']==$e['id_jurusan']){
 $sel = "selected";
 }else{
 $sel = "";
 }
 echo "<option value='$e[id_jurusan]' size='20' $sel>$e[jurusan]</option>";
 }
 echo "
 </select>";

Artikel Rekomendasi

Artikel Terkait
Free Source Code Website Dinamis PHP MYSQL
Cara Update Edit data di mysql dengan PHP
Memasang Komentar Facebook di Website Dinamis PHP MYSQL
Aplikasi Website Portal Menggunakan PHP MySQL
Free Download Sistem Informasi Hospital / Rumah sakit Berbasis Web PHP MYSQL
Membuat Link Halaman Dinamis dengan PHP
Script PHP Mengambil Title dan Meta tag Website
Cara Membuat Artikel Terkait dengan PHP MYSql
Aplikasi Reservasi Hotel PHP MYSQL
Mencegah Exploit URL dengan enkripsi Method Get PHP

Diskusi

Selamat datang di blog mari belajar coding. Apakah teman-teman pernah menjumpai sebuah form dropdown select option dengan kotak pencarian didalamnya? Pada tutorial kali ini kita akan belajar membuat sebuah form dropdown dengan kotak pencarian. Dengan adanya kotak pencarian di dalam sebuah dropdown select option kita akan di permudah untuk mencari pilihan dalam list dropdown tanpa harus scroll sampai kebawah.

Membuat Dropdown Search Select Option

1. Untuk membuat sebuah kotak pencarian di dalam dropdown. Kita memerlukan sebuah plugin bernama select2. Kamu bisa baca dokumentasi select2 untuk lebih memahaminya.

2. Cara memasang select2. Letakkan kode berikut ini di dalam tag head <head>.

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

3. Buat form dropdown menggunakan tag select option.

<form method="POST">
 <select id="provinsi" name="provinsi">
  <option value="ACEH">ACEH</option>
  <option value="RIAU">RIAU</option>
  <option value="JAMBI">JAMBI</option>
  <option value="SUMATERA UTARA">SUMATERA UTARA</option>
  <option value="BENGKULU">BENGKULU</option>
  <option value="LAMPUNG">LAMPUNG</option>
  <option value="DKI JAKARTA">DKI JAKARTA</option>
  <option value="JAWA BARAT">JAWA BARAT</option>
  <option value="JAWA TENGAH">JAWA TENGAH</option>
  <option value="JAWA TIMUR">JAWA TIMUR</option>
 </select>
</form>

4. Konfigurasi select option dengan plugin select2.

<script type="text/javascript">
 $(document).ready(function() {
     $('#provinsi').select2();
 });
</script>

Keterangan:
Plugin select2 akan dijalankan saat halaman telah selesai di muat. Untuk memasang select2 didalam dropdown, kamu bisa menggunakan value attribute id atau class select option.

5. Kode lengkap.

<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding.com</title>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
 <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
</head>
<body>
<form method="POST">
 <select id="provinsi" name="provinsi">
  <option ></option>
  <option value="ACEH">ACEH</option>
  <option value="RIAU">RIAU</option>
  <option value="JAMBI">JAMBI</option>
  <option value="SUMATERA UTARA">SUMATERA UTARA</option>
  <option value="BENGKULU">BENGKULU</option>
  <option value="LAMPUNG">LAMPUNG</option>
  <option value="DKI JAKARTA">DKI JAKARTA</option>
  <option value="JAWA BARAT">JAWA BARAT</option>
  <option value="JAWA TENGAH">JAWA TENGAH</option>
  <option value="JAWA TIMUR">JAWA TIMUR</option>
 </select>
</form>
<script type="text/javascript">
 $(document).ready(function() {
     $('#provinsi').select2();
 });
</script>
</body>
</html>

6. Jalankan file menggunakan browser.

7. Untuk menambahkan placeholder didalam dropdown.

<script type="text/javascript">
 $(document).ready(function() {
     $('#provinsi').select2({
      placeholder: 'Pilih Provinsi',
      allowClear: true
     });
 });
</script>

Related search:
Membuat dropdown search dengan PHP
Membuat dropdown dengan kotak pencarian