Browse Source

Calcul auto des options présentes pour le testeur.

pull/1/head
Matthieu Marcillaud 3 years ago
parent
commit
17fe8545d6
  1. 49
      prive/squelettes/contenu/tester_select2.html

49
prive/squelettes/contenu/tester_select2.html

@ -22,7 +22,6 @@
#SET{id,u1}
<div class="editer pleine_largeur">
<label for="demo_#GET{id}">Basique</label>
<p class="explication">Aucune option, juste le select de base</p>
<select class="select2" name="demo_#GET{id}" id="demo_#GET{id}">
<option value="">Sélectionnez un animal...</option>
#GET{animaux}
@ -31,11 +30,7 @@
#SET{id,u2}
<div class="editer pleine_largeur">
<label for="demo_#GET{id}">Options Placeholder et Clear</label>
<p class="explication">
Les options <code>data-placeholder="..."</code> et <code>data-allow-clear="true"</code>
sont présentes, directement sur la balise <code>select</code>
</p>
<label for="demo_#GET{id}">Placeholder et Clear</label>
<select class="select2" name="demo_#GET{id}" id="demo_#GET{id}"
data-placeholder="Sélectionnez un animal..."
data-allow-clear="true">
@ -46,12 +41,9 @@
#SET{id,u3}
<div class="editer pleine_largeur">
<label for="demo_#GET{id}">Options Sort Alpha</label>
<p class="explication">
L’option <code>data-sort-alpha="true"</code>
est présente et applique un tri alphabétique sur la liste
</p>
<label for="demo_#GET{id}">Sort Alpha</label>
<select class="select2" name="demo_#GET{id}" id="demo_#GET{id}"
data-placeholder="Sélectionnez un animal..."
data-sort-alpha="true">
<option value="">Sélectionnez un animal...</option>
#GET{animaux}
@ -70,7 +62,6 @@
#SET{id,m1}
<div class="editer pleine_largeur">
<label for="demo_#GET{id}">Basique</label>
<p class="explication">Aucune option, juste le select multiple de base</p>
<select class="select2" name="demo_#GET{id}[]" id="demo_#GET{id}" multiple>
#GET{animaux}
</select>
@ -79,10 +70,6 @@
#SET{id,m2}
<div class="editer pleine_largeur">
<label for="demo_#GET{id}">Options Placeholder</label>
<p class="explication">
L’option <code>data-placeholder="..."</code>
est présente, directement sur la balise <code>select</code>
</p>
<select class="select2" name="demo_#GET{id}[]" id="demo_#GET{id}" multiple
data-placeholder="Sélectionnez des animaux...">
#GET{animaux}
@ -92,10 +79,6 @@
#SET{id,m3}
<div class="editer pleine_largeur">
<label for="demo_#GET{id}">Options Sort Alpha</label>
<p class="explication">
L’option <code>data-sort-alpha="true"</code>
est présente et applique un tri alphabétique sur la liste
</p>
<select class="select2" name="demo_#GET{id}[]" id="demo_#GET{id}" multiple
data-sort-alpha="true">
#GET{animaux}
@ -107,8 +90,32 @@
<script type="text/javascript">
jQuery('select.select2').each(function(){
let me = jQuery(this);
let data = me.data();
if (Object.keys(data).length) {
let options = jQuery('<div class="select2-options"><strong>Options présentes :</strong><ul></ul></div>');
jQuery.each(data, function(key, value) {
options.find('ul').append('<li><code>data-' + key + ' = "' + value + '"</code></li>');
});
console.log(options);
me.prevAll('label').after(options);
}
});
jQuery('select.select2').select2();
jQuery('select.select2[data-sort-alpha=true]').select2({
'sorter': data => data.sort((a, b) => a.text.localeCompare(b.text))
});
</script>
</script>
<style>
.select2-options {
font-size: .8rem;
background: #eee;
padding: .5rem;
margin-bottom: .5rem;
}
.select2-options ul {
margin-left: 1.5rem;
list-style:disc;
}
</style>
Loading…
Cancel
Save