Bismillaahirrohmaanirrohiim…
Berikut ini adalah kode yang biasanya digunakan untuk library javascript select2.
Ingat, select2 versi 4 keatas, tidak bisa menggunakan selector INPUT, harus <SELECT>.
<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>
$("#selector").select2();
//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();
//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(); }
$("#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();
//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>
$("#selector").val("newvalue").trigger("change");
$("#selector").append("<option value='d' selected='selected'>Nilai</option>").trigger("change");
$("#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(); } }) });
Demikian, jika ada yang ditanyakan bisa post di komentar. semoga bermanfaat.
Bismillaahirrohmaanirrohiim... Saat ini teknologi sudah berkembang cepat, ada kalanya kita ingin diberikan informasi secara cepat…
Bismillaahirrohmaanirrohiim... Jika web diakses oleh banyak orang, khususnya yang berbasis wordpress, maka secara normal proses…
Bismillaahirrohmaanirrohiim... Saat ini, sekolah baik SD, SMP, ataupun SMA tentunya ingin dapat melihat dan memonitor…
Bismillaahirrohmaanirrohiim... Pada artikel kali ini saya akan berbagi informasi tentang program pendataan pendukung calon legislatif…
Bismillaahirrohmaanirrohiim... Saat kita melakukan screenshot di browser chrome, pada windows 11 menyediakan fungsi yang bagus…
Bismillaahirrohmaanirrohiim... Untuk website yang ingin tidak muncul popup translate dari browser, bisa dicoba kode di…