Categories: Javascript

Kode select2 yang berguna

Bismillaahirrohmaanirrohiim…

Berikut ini adalah kode yang biasanya digunakan untuk library javascript select2.

Ingat, select2 versi 4 keatas, tidak bisa menggunakan selector INPUT, harus <SELECT>.

Menggunakan bootstrap 3 dan select2 versi 4.0.3

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" rel="stylesheet" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>
//jika kotak lebih kecil bisa dicustom dengan css
<style type="text/css">
    .select2-container .select2-selection--single {
        height:34px ;
    }
</style>

Merubah select menjadi select2

$("#selector").select2();

Mengambil option dengan ajax

//normal
$("#selector").select2({
    minimumInputLength: 2,
    allowClear: true,
    placeholder: "Pilih Data",
    ajax: {
        dataType: "json",
        url: "urljson?act=list",
        delay: 0,
        data: function(params) {
            return {
                search: params.term
            }
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        }
    }
}).on("select2:select", function (evt) {
    var data = $("#selector option:selected").text();
    alert(data);
});

kode PHP nya
$search = $_GET['search'];
$idx = 0;
$list[$idx]['id'] = 123;
$list[$idx]['text'] = 'Teks option';
echo json_encode($list);
exit();

Mengambil option dengan ajax dan URL bersifat dinamis

//jika url dinamis, misalnya mengambil nilai dari data yang dinamis
$("#selector").select2({
    minimumInputLength: 2,
    allowClear: true,
    placeholder: "Pilih Data",
    ajax: {
        dataType: "json",
        url: function() {
              return getUrl()
        },
        delay: 0,
        data: function(params) {
            return {
                search: params.term
            }
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        }
    }
}).on("select2:select", function (evt) {
    var data = $("#selector option:selected").text();
    alert(data);
});

fungsi javascriptnya
function getUrl() {
    return "urljson?act=list&dinamis="+$("#selector").val();
}

Mengisi option pada select2 secara dinamis menggunakan ajax

$("#selector").select2();
function isiOption(id) {
    $("#selector").html("");

    $.ajax({
        type: "POST",
        data: "act=x&did=x",
        url: "url?getdata="+id,
        success: function(e) {
            $("#selector").append(e);
            $("#selector").trigger("change"); 
        },
        beforeSend: function(e) {
        },
        complete: function(e) {
        },
        error: function(e, s, a) {
            alert("Gagal saat load data, silahkan ulangi kembali [1].");
        }
    })
}
fungsi PHP nya
echo '<option value="0">Pilih Data</option>';
echo '<option value="1">Pilih Data 1</option>';
echo '<option value="2">Pilih Data 2</option>';
echo '<option value="3">Pilih Data 3</option>';
exit();

Jika menggunakan form pada bootstrap 3

//CSS untuk menyembunyikan icon x allow clear dan segitiga dropdown
.select2-container {
position:absolute;
}
//HTML nya
<div class="form-group">
    <label for="selector">Selector*</label>
    <div class="input-group">
    <select name="selector" id="selector" style="width: 100%;" class="form-control use-select2" >
        <?php
        echo '<option value="0">Pilih Selector</option>';
        ?>
    </select>
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" data-select2-open="single-append-text">
            <span class="glyphicon glyphicon-search"></span>
        </button>
    </span>
    </div>

</div>

Mengganti nilai pada select2 secara dinamis

$("#selector").val("newvalue").trigger("change"); 

Memberi nilai default pada select2 ajax

$("#selector").append("<option value='d' selected='selected'>Nilai</option>").trigger("change");

Handle clear select2 yang dinamis plus ambil data dengan ajax

$("#selector_id").change(function(){

    showLoading();

    var selector_id = $(this).val();
    if (selector_id===null || selector_id=="null" || selector_id=="" || !selector_id) {

        $("#user_telp").val("").removeAttr("readonly");
        $("#user_alamat").val("").removeAttr("readonly");
        $("#user_nama").val("").removeAttr("readonly");
        $("#jenis").val("personal").change();

        hideLoading();
        return;
    }

    // alert("change "+selector_id);
    // return;

    $.ajax({
        type: "POST",
        data: "did="+selector_id,
        url: "yoururl?getact=getcustomerdetail",
        success: function(e) {
            try {
                var data = $.parseJSON(e);
                $("#user_telp").val(data.user_telp).attr("readonly","readonly");
                $("#user_alamat").val(data.user_alamat).attr("readonly","readonly");
                $("#user_nama").val(data.user_nama).attr("readonly","readonly");
                $("#jenis").val(data.jenis).change();
                
            } catch (s) {

                $("#user_telp").removeAttr("readonly");
                $("#user_alamat").removeAttr("readonly");
                $("#user_nama").removeAttr("readonly");

                alert("Gagal saat load data, silahkan ulangi kembali [0].");
            }
        },
        complete: function(e) {
            hideLoading();
        },
        error: function(xhr, ajaxOptions, thrownError) {
            $("#user_telp").val("").removeAttr("readonly");
            $("#user_alamat").val("").removeAttr("readonly");
            $("#user_nama").val("").removeAttr("readonly");
            $("#jenis").val("personal").change();

            hideLoading();
        }
    })
});

tags yang tidak case sensitive

Tags digunakan untuk mencari nilai yang sudah ada diselect, jika tidak maka bisa ditambahkan otomatis dengan menandai data yang sudah ada dengan ID. Nah biasanya kan yang kita ketik beda huruf besar kecilnya dianggap baru, solusinya:

 $("#idselect").select2({
    tags: true,
    insertTag: function(data, tag) {
         var $found = false;
         $.each(data, function(index, value) {
             if($.trim(tag.text).toUpperCase() == $.trim(value.text).toUpperCase()) {
                 $found = true;
             }
         });

         if(!$found) data.unshift(tag);
     }
 });

Reset nilai select2

$('#mySelect2').val(null).trigger('change');

Demikian, jika ada yang ditanyakan bisa post di komentar. semoga bermanfaat.

Bagikan
rasupe

Recent Posts

CMS Website Desain Interior – PHP MySQL

CMS (Content Management System) Web untuk Desain Interior adalah solusi lengkap untuk mempresentasikan bisnis desain…

3 days ago

Source code Template website sekolah dengan react js

Bismillaahirrohmaanirrohiim... Berikut ini source code yang dapat dimodifikasi untuk membuat front end website sekolah dengan…

3 weeks ago

Subdomain pada cyberpanel tidak dapat diakses

Bismillaahirrohmaanirrohiim... Jika domain dan sub domainnya berada dalam satu vps cyberpanel, maka seringkali jadi tidak…

4 weeks ago

10 Aplikasi Kasir Terbaik di Indonesia (2025)

Bismillaahirrohmaanirrohiim... Dalam era digital saat ini, penggunaan aplikasi kasir (Point of Sale/POS) menjadi solusi penting…

4 weeks ago

Website di aapanel sering mati sendiri

Bismillaahirrohmaanirrohiim... Saat browsing-browsing saya seringkali melihat iklan aapanel, sekilas membuat penasaran sampai akhirnya saya mencoba…

4 weeks ago

Reset password cyberpanel via SSH

Bismillaahirrohmaanirrohiim... Berikut ini perintah untuk reset password admin cyberpanel melalui SSH command line. pastikan login…

4 weeks ago