Bootstrap Multiselect Skeleton
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<select id="ddlPermission" multiple="multiple" name="permission_ddl">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<input type="submit" name="btnSubmit" id="btnSubmit" onclick="myFunction()" class="button active" value="Submit">
JavaScript
$(document).ready(function() {
$('#ddlPermission').multiselect({
buttonWidth : '100%',
maxHeight : 100,
includeSelectAllOption : true,
dropRight : true
});
});
function myFunction() {
var allVal=$("#ddlPermission").val();
alert(allVal);
return false;
}