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"> </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
});
})<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!
