Membuat input form di dalam select2 selectbox

Kali ini saya akan memberikan tutorial singkat Membuat input form di dalam select2 selectbox, kira -kira apakah sudah terbayang dibenak anda akan seperti apa form nya di dalam selectbox? nanti bisa lihat langsung gambarnya untuk memperjelas, namun sebelum itu saya mau menginfokan alasan saya membuat tutorial ini adalah karena permintaan client yang ingin menambahkan option select tanpa harus ke halaman tertentu.

Dan jadilah input form di dalam selectbox select2 seperti gambar di bawah ini.

gambar pertama merupakan select box menggunakan select2 plugin

Gambar pertama

Nah gambar yang kedua merupakan input form di dalam select2 anda bisa lihat gambar di bawah ini

Gambar Kedua

Jadi initnya adalah menambahkan satu form inputan untuk menambahkan data yang nantinya bisa ada di dalam list select2, bagaimana cara membuatnya? mudah kok silahkan anda copy dan pastekan kode di bawah ini kemudian simpan dengan nama select2form.php ke dalam direktori c:/xampp/htdocs/select2form.php

<html>

<head>

<title>Select 2 with input textboxt | www.hakkoblogs.com</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet"></link>



</head>

<body>

<div class="form-group">



                              <label class="col-sm-2 col-sm-2 control-label">Mata Pelajaran</label>

                              <div class="col-sm-6">

                              <select class="form-control select2" id="kode" name="kode" required="">

                              <option value=""> -- Mata Pelajaran -- </option>

                              <option value="">Matematika</option>

                              <option value="">Fisika</option>

                              <option value="">Kimia</option>

                              <option value="">Komputer</option>

                              <option value="">Sosiologi</option>

                              <option value="">Analisis Data</option>

                              <option value="">Perancangan Database</option>

                              </select>

                              </div>
</div>
<script crossorigin="anonymous" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

                          <script>



$(function () {



  $('.select2')


.select2({


tags: true


}


)


.on('select2:open', () => {

 $(".select2-results:not(:has(a))").append('<form name="inputprovinsi" method="POST" action="">
<input type="text" size="10" id="inputpro" name="inputpro"/><input type="submit" id="input" name="input" value="Add"/></form>
<a href="#"></a>');

})}); </script>

</body>

</html>

Setelah itu silahkan jalankan di browser dengan mengetikkan localhost/select2form.php maka anda akan mendapatkan tampilan seperti gambar di atas.

Penjelasan singkat kode

 <script>



$(function () {


//membuat class select2 untuk selectbox
  $('.select2')



.select2({


//memperbolehkan input tag yang tidak ada dalam list
tags: true



}



)


//menambahkan form di dalam select2
.on('select2:open', () => {


 $(".select2-results:not(:has(a))").append('<form name="inputprovinsi" method="POST" action="">
<input type="text" size="10" id="inputpro" name="inputpro"/><input type="submit" id="input" name="input" value="Add"/></form>
<a href="#"></a>');



})}); </script>

Bagaimana cukup mudah bukan untuk Membuat input form di dalam select2 selectbox ? pastinya ya, di tutorial berikutya kita akan mencoba Membuat input form di dalam select2 selectbox dan menginput data dari form tersebut kedalam tabel, jadi select2 nanti akan load data dari tabel di database kemudian bisa input data untuk menambah option di select2 tersebut.

Bisa di bilang membuat form input dinamically di select2 , jadi tetap pantau terus www.hakkoblogs.com ya untuk mendapatkan update terbaru seputar tutorial pemrogramman, selamat mencoba.

Happy Coding & Programming