Johhny Sins Johhny Sins - 11 days ago 6
CSS Question

Select2 display number of selected

I am currently working on this website

When you select multiple elements in the

select2
list it displays the selected ones in the field(on desktop), what I want is for it to just display how many elements were selected(which it already does on mobile). This is the code that I have at the moment

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="http://onetechsearch.com/wp-content/themes/mamatoti/includes/jquery-1.8.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cat= ["C"];
$("#cat").select2({
data: cat
});
});
</script>
<script>
$('select').select2();

$('select').on('select2:close', function (evt) {
var uldiv = $(this).siblings('span.select2').find('ul')
var count = uldiv.find('li').length - 1;
uldiv.html("<li>"+count+" items selected</li>")
});
</script>



<script>
$('select').select2({
minimumResultsForSearch: -1,
placeholder: function(){
$(this).data('placeholder');
}
});
</script>

<script>
function check()
{
var values = document.getElementById('cat').selectedIndex;
if(values == '-1')
{
alert('Please select at least one Category');
return false;
}
}
</script>


</head>




select{
appearance:none; -moz-appearance:none; -webkit-appearance: none;
}

.styleselect {

margin-right: 2%;

margin-left: 2%;
background-image: url("http://s21.postimg.org/nx05vn15f/dropdown_style.png");
background-position: 117px center;
background-repeat: no-repeat;
overflow: hidden;
vertical-align: middle;
width: 140 px;
float:left;
padding: 0;
margin: 0;
display: inline-block;
}
.styleselect select {
background-color: transparent;
margin: 0 0 1px;
color: #ffffff;
padding: 4px;
float:left;
vertical-align: middle;
width: 140 px;
}
.styleselect select option{
background-color: #DFD3C3;
overflow: hidden;
vertical-align: middle;
width: 140 px;
padding: 0;
margin: 0;
float:left;
display: inline-block;
}

<div class="styleselect">
<select data-placeholder="Select a Category" name="cat" id="cat" class="select2" multiple >
<option value="all">All Categories</option>
<option value="EN">England</option>
<option value="GR">Greece</option>
<option value="US">USA</option>
<option value="IT">Italy</option>
</select>
</div>




Answer

You must write the javascript code follow(after html and css) the html or css code.

<html>
<style>
//here is css code
</style>
<script>
//Here is javascript code
</script>