Library yang digunakan adalah select2 Full Versi 4
Select2 adalah javascript library yang paling banyak digunakan untuk menampilkan daftar pilihan, dimana dengan select2 kita dapat mencari pilihan yang kita inginkan
Terkadang kita ingin mengupdate pilihan select2, misalnya dengan menambahkan pilihan-pilihan baru atau bahkan ingin merubah subyek pilihan, misalnya dari daftar pilihan propinsi menjadi daftar pilihan kota
Agar dapat merubah daftar pilihan tersebut tanpa harus membuat ulang select2, kita menggunakan “customAdapter” select2 pada configurasi pembuatan select2
Berikut adalah custom adapternya :
var Utils = $.fn.select2.amd.require('select2/utils');
var Tags = $.fn.select2.amd.require('select2/data/tags');
var MinimumInputLength = $.fn.select2.amd.require('select2/data/minimumInputLength');
var baseApply = $.fn.select2.defaults.apply;
$.fn.select2.amd.define('select2/data/customAdapter',
['select2/data/array', 'select2/utils','select2/data/tags'],
function (ArrayAdapter, Utils) {
function CustomDataAdapter ($element, options) {
CustomDataAdapter.__super__.constructor.call(this, $element, options);
}
Utils.Extend(CustomDataAdapter, ArrayAdapter);
CustomDataAdapter.prototype.updateOptions = function (data) {
this.$element.find('option').remove();
this.addOptions(this.convertToOptions(data));
}
return CustomDataAdapter;
}
);
var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');
//ini agar customadapter bekerja dengan tags=true
$.fn.select2.defaults.apply = function (options) {
options.dataAdapter = customAdapter;
if (options.minimumInputLength > 0) {
options.dataAdapter = Utils.Decorate(options.dataAdapter, MinimumInputLength);
}
if (options.tags) {
options.dataAdapter = Utils.Decorate(options.dataAdapter, Tags);
}
return baseApply.apply(this, arguments);
};
Setelah kode custom diatas baru kita tulis kode pada saat document ready
Berikut adalah contoh kode untuk merubah pilihan dari daftar propinsi ke daftar kota
$(document).ready(function(){
var daftarPropinsi=[
{'id': '1', 'text': 'Jawa Barat'},
{'id': '2', 'text': 'Jawa Tengah'},
{'id': '3', 'text': 'Jawa Timur'}
];
var daftarKota=[
{'id': '1', 'text': 'Jakarta'},
{'id': '2', 'text': 'Semarang'},
{'id': '3', 'text': 'Surabaya'}
];
//kita menggunakan select dengan id pilihan sebagai select2
$('#pilihan').select2({
allowClear: true,
data: daftarPropinsi,
placeholder: 'Pilih salah satu ..', //placeholder perlu jika opsi tags=true
dataAdapter: customAdapter,
selectOnClose: false,
tags: true, // ini agar dapat menerima kata baru
multiple:false,
theme: "bootstrap", // ini jika ada menyertakan select2-bootstrap.css, agar tampilan select2 sesuai bootstrap
width: "auto",
language: "en-US"
});
$('#pilihan').val(null).trigger("change"); //ini agar nilai awal pilihan kosong
//ini adalah tombol untuk merubah daftar pilihan
$('#gantiKota').on('click',function(){
$('#pilihan').data('select2').dataAdapter.updateOptions(daftarKota);
$('#pilihan').val(null).trigger("change"); //ini agar nilai awal pilihan kosong
});
$('#gantiPropinsi').on('click',function(){
$('#pilihan').data('select2').dataAdapter.updateOptions(daftarPropinsi);
$('#pilihan').val(null).trigger("change"); //ini agar nilai awal pilihan kosong
});
$('#kosongkan').on('click',function(){
$('#pilihan').data('select2').dataAdapter.updateOptions([]);
});
})Dan berikut adalah bagian html untuk script diatas
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" integrity="sha512-rt/SrQ4UNIaGfDyEXZtNcyWvQeOq0QLygHluFQcSjaGB04IxWhal71tKuzP6K8eYXYB6vJV4pHkXcmFGGQ1/0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css" integrity="sha512-3//o69LmXw00/DZikLz19AetZYntf4thXiGYJP6L49nziMIhp6DVrwhkaQ9ppMSy8NWXfocBwI3E8ixzHcpRzw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container-fluid">
<div class="mb-npx collapse show">
<fieldset class="form-group">
<div class="row">
<div class="col-12 pl-3">
<div class="form-group">
<label class="font-weight-bold" for="pilihan">Pilihan</label>
<select id="pilihan" class="form-control"></select>
</div>
<div class="form-group">
<button id="gantiKota" type="button" class="btn btn-success">Daftar Kota</button>
<button id="gantiPropinsi" type="button" class="btn btn-success">Daftar Propinsi</button>
<button id="kosongkan" type="button" class="btn btn-success">Kosongkan Daftar</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js" integrity="sha512-igl8WEUuas9k5dtnhKqyyld6TzzRjvMqLC79jkgT3z02FvJyHAuUtyemm/P/jYSne1xwFI06ezQxEwweaiV7VA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js" integrity="sha512-RtZU3AyMVArmHLiW0suEZ9McadTdegwbgtiQl5Qqo9kunkVg1ofwueXD8/8wv3Af8jkME3DDe3yLfR8HSJfT2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
//tulis kode diatas disini
</script>
