Calcul auto des options présentes pour le testeur.

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>