Bu yazımda js kütüphanesinden select2 kullanarak selectbox ile çoklu seçim yapma kodlarını paylaşacağım.
Aşağıdaki kodları ‘.html’ olarak kayıt edip direk canlı olarak çalıştırabilirsiniz.
<html>
<head>
<title>
select2 Kütüphanesi ile Çoklu Seçim Yapma
</title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<select multiple id="sehirID" style="width:200px">
<option value="corum">Çorum</option>
<option value="ankara">Ankara</option>
<option value="mersin">Mersin</option>
<option value="trabzon">Trabzon</option>
<option value="malatya">Malatya</option>
</select>
<input type="checkbox" id="tumunuSec" >Tümünü Seç
<input type="button" id="button" value="Seçili Göster">
<script type="text/javascript">
$("#sehirID").select2();
$("#tumunuSec").click(function(){
if($("#tumunuSec").is(':checked') ){
$("#sehirID > option").prop("selected","selected");
$("#sehirID").trigger("change");
}else{
//$("#sehirID > option").removeAttr("selected");
$('#sehirID').val(null).trigger('change');
// $("#sehirID").trigger("change");
}
});
$("#button").click(function(){
alert($("#sehirID").val());
});
$("#sehirID").select2({
placeholder: "Lütfen Seçiniz",
allowClear: true
});
</script>
</body>
</html>
Aradığım gibi olmuş elinize sağlık
Eline sağlık çok faydalı oldu teşekkürler