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});})
Terima kasih. Selamat Mencoba
You may also like
0 Comments
Leave a Reply
Popular Posts
Scroll to Top