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></code><br><code class="language-css"><link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css" rel="stylesheet"/></code><br><code class="language-js"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></code><br><code class="language-css"><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/></code><br><code class="language-js"><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>CSS :
body{</code><br><code class="language-css"> background-color: #455A64;</code><br><code class="language-css">}</code><br><code class="language-css"></code><br><code class="language-css">#multiWrapper {</code><br><code class="language-css"> width: 300px;</code><br><code class="language-css"> margin: 25px 0 0 25px;</code><br><code class="language-css">}</code><br><code class="language-css"></code><br><code class="language-css">.def-cursor {</code><br><code class="language-css"> cursor: default;</code><br><code class="language-css">}HTML :
<div id='multiWrapper'></code><br><code class="language-html"> <select id="multi"></code><br><code class="language-html"> <optgroup class='def-cursor' label='Country' data-city='City'></code><br><code class="language-html"> <option data-city="" id="1"> </option></code><br><code class="language-html"> <option data-city="Athens" id="1">Greece</option></code><br><code class="language-html"> <option data-city="Rome" id="2">Italy</option></code><br><code class="language-html"> <option data-city="Paris" id="3">France</option></code><br><code class="language-html"> </optgroup></code><br><code class="language-html"> </select></code><br><code class="language-html"></div>Javascript :
function formatResultMulti(data) {</code><br><code class="language-js"> var city = $(data.element).data('city');</code><br><code class="language-js"> var classAttr = $(data.element).attr('class');</code><br><code class="language-js"> var hasClass = typeof classAttr != 'undefined';</code><br><code class="language-js"> classAttr = hasClass ? ' ' + classAttr : '';</code><br><code class="language-js"></code><br><code class="language-js"> var $result = $(</code><br><code class="language-js"> '<div class="row">' +</code><br><code class="language-js"> '<div class="col-md-6 col-xs-6' + classAttr + '">' + data.text + '</div>' +</code><br><code class="language-js"> '<div class="col-md-6 col-xs-6' + classAttr + '">' + city + '</div>' +</code><br><code class="language-js"> '</div>'</code><br><code class="language-js"> );</code><br><code class="language-js"> return $result;</code><br><code class="language-js">}</code><br><code class="language-js"></code><br><code class="language-js">$(function() {</code><br><code class="language-js"> $('#multi').select2({</code><br><code class="language-js"> width: '100%',</code><br><code class="language-js"> formatResult: formatResultMulti</code><br><code class="language-js"> });</code><br><code class="language-js">})<br><br>Update 2026
Artikel ini pertama kali ditulis beberapa tahun lalu. Sejak itu, banyak hal yang berubah di dunia teknologi. Berikut beberapa tutorial terbaru yang mungkin berguna buat kamu:
Kalau ada pertanyaan atau mau request tutorial lain, tinggalkan komentar di bawah ya!
