Menampilkan Select2 dengan Multi Column

Javascript

Menampilkan Select2 dengan Multi Column

16 Dec, 2018 442

Berikut cara menggunakan select2 dan menampilkan dengan tampilan multi column
Pertama tambahkan script ini di dalam <head></head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>

CSS :

body{
    background-color: #455A64;
}

#multiWrapper {
    width: 300px;
    margin: 25px 0 0 25px;
}

.def-cursor {
    cursor: default;
}

HTML :

<div id='multiWrapper'>
    <select id="multi">
        <optgroup class='def-cursor' label='Country' data-city='City'>
            <option data-city="" id="1">&nbsp;</option>
            <option data-city="Athens" id="1">Greece</option>
            <option data-city="Rome" id="2">Italy</option>
            <option data-city="Paris" id="3">France</option>
        </optgroup>
    </select>
</div>

Javascript :

function formatResultMulti(data) {
    var city = $(data.element).data('city');
    var classAttr = $(data.element).attr('class');
    var hasClass = typeof classAttr != 'undefined';
    classAttr = hasClass ? ' ' + classAttr : '';

    var $result = $(
        '<div class="row">' +
        '<div class="col-md-6 col-xs-6' + classAttr + '">' + data.text + '</div>' +
        '<div class="col-md-6 col-xs-6' + classAttr + '">' + city + '</div>' +
        '</div>'
    );
    return $result;
}

$(function() {
    $('#multi').select2({
        width: '100%',
        formatResult: formatResultMulti
    });
})

Terima kasih. Selamat Mencoba

Konfigurasi Awal Select2

Select2 adalah library jQuery yang menggantikan elemen select biasa dengan fitur pencarian, tagging, dan multi-select yang lebih powerful. Untuk menggunakan fitur multi column, kamu perlu menginstall Select2 terlebih dahulu:

<!-- CSS Select2 --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />  <!-- JS Select2 --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

Implementasi Multi Column

Untuk menampilkan multiple kolom dalam dropdown Select2, kamu perlu menggunakan template custom:

$('#mySelect').select2({   templateResult: function(data) {     if (!data.id) return data.text;     var row = $('<div class="row">' +       '<div class="col-4">' + data.text + '</div>' +       '<div class="col-4">' + data.element.dataset.info + '</div>' +       '<div class="col-4">' + data.element.dataset.status + '</div>' +       '</div>');     return row;   },   templateSelection: function(data) {     return data.text;   } });

Tips dan Best Practices

Gunakan data attributes - Simpan data tambahan di atribut data- pada option element
Styling custom - Override CSS Select2 untuk menyesuaikan tampilan dengan desain aplikasi
Performance - Untuk data besar, gunakan AJAX loading untuk memuat data secara dinamis
Accessibility - Tambahkan ARIA attributes untuk mendukung screen reader

Contoh Implementasi Lengkap

Berikut contoh lengkap Select2 dengan multi column untuk menampilkan data produk:

<select id="productSelect" style="width: 100%">
  <option value="1" data-price="Rp 100.000" data-stock="Tersedia">Produk A</option>
  <option value="2" data-price="Rp 200.000" data-stock="Habis">Produk B</option>
</select>

<script>
$('#productSelect').select2({
  templateResult: function(data) {
    if (!data.id) return data.text;
    return $('<div style="display:flex; gap:20px">' +
      '<span style="width:200px">' + data.text + '</span>' +
      '<span style="width:150px; color:green">' + $(data.element).data('price') + '</span>' +
      '<span style="width:100px">' + $(data.element).data('stock') + '</span>' +
      '</div>');
  }
});
</script>

Tips Debugging

Gunakan browser DevTools untuk memeriksa HTML yang di-generate Select2
Periksa console untuk error JavaScript
Validasi bahwa data attributes terbaca dengan benar

Cara Menggunakan Select2

Javascript 04 Nov, 2018

0 Comments

Scroll to Top