Select2 Anzeige Anzahl der ausgewählten

Zur Zeit arbeite ich an dieser website Select2 Anzeige Anzahl der ausgewählten

Wenn Sie mehrere Elemente in der select2 Liste es zeigt die ausgewählten im Feld (auf dem Desktop) auszuwählen, was ich will, ist für sie nur angezeigt werden Wie viele Elemente wurden ausgewählt (was bereits auf Mobilgeräten möglich ist). Dies ist der Code, den ich im 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"> 
 
\t \t \t \t \t <select data-placeholder="Select a Category" name="cat" id="cat" class="select2" multiple > 
 
    \t \t \t \t \t \t \t <option value="all">All Categories</option> 
 
    \t \t \t \t \t \t <option value="EN">England</option> 
 
    \t \t \t \t \t \t <option value="GR">Greece</option> 
 
    \t \t \t \t \t \t <option value="US">USA</option> 
 
    \t \t \t \t \t \t <option value="IT">Italy</option> 
 
    \t \t \t \t \t \t \t </select> 
 
\t \t \t \t </div>

Quelle

2016-11-26 Johhny Sins

-1

Sie müssen über den JavaScript-Code folgen (nach HTML und CSS) der HTML oder CSS-Code schreiben.

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

Quelle

2016-11-26 12:51:06 Long

Vielen Dank, das hat funktioniert –

Select2 Anzeige Anzahl der ausgewählten

Antwort

Verwandte Themen