Différences

Ci-dessous, les différences entre deux révisions de la page.

--- informatique:javascript:alpinejs [18/10/2025 10:46] – cyrille
+++ informatique:javascript:alpinejs [31/12/2025 10:52] (Version actuelle) – [Select multiple] cyrille
@@ Ligne 40: / Ligne 40: @@
   * Service injection - Clean dependency injection pattern
   * Selector targeting - Precise DOM targeting without attribute pollution
+===== Tips =====
+==== Select multiple ====
+Version simple ; utilise directement l'event ''$event.target.selectedOptions'' :
+<code html>
+<div class="mb-3">
+ <label for="rirSelect" class="form-label">Select RIR(s):</label>
+ <select id="rirSelect" class="form-select" multiple
+    @change="filterRirs($event.target.selectedOptions)">
+  <template x-for="rir in guiData.rirs" :key="rir.key">
+   <option x-bind:value="rir.key" x-text="rir.attributes.label"></option>
+  </template>
+ </select>
+</div>
+</code>
+Version avec bouton pour supprimer la sélection et désactiver ce bouton quand aucune sélection ; utilise un ''x-data'' :
+<code html>
+<div class="mb-3" x-data="{selectedOptions:[]}">
+ <label for="rirSelect" class="form-label">Select RIR(s):</label>
+ <button class="btn btn-outline-primary btn-sm"
+   x-bind:disabled="selectedOptions.length==0"
+   @click="selectedOptions=[];filterRirs()"
+   >All</button>
+ <select id="rirSelect" class="form-select" multiple
+   x-model="selectedOptions" @change="filterRirs(selectedOptions)"
+   >
+  <template x-for="rir in guiData.rirs" :key="rir.key">
+   <option x-bind:value="rir.key" x-text="rir.attributes.label"></option>
+  </template>
+ </select>
+</div>
+</code>