Différences

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

--- informatique:javascript:alpinejs [31/12/2025 10:42] – Alpine.js tips Select multiple cyrille
+++ informatique:javascript:alpinejs [31/12/2025 10:52] (Version actuelle) – [Select multiple] cyrille
@@ Ligne 45: / Ligne 45: @@
 ==== 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> <button class="btn btn-outline-primary btn-sm" @click="filterRirs()">All</button>
+ <label for="rirSelect" class="form-label">Select RIR(s):</label>
-    <select id="rirSelect" class="form-select" multiple @change="filterRirs($event.target.selectedOptions)">
+ <select id="rirSelect" class="form-select" multiple
-        <template x-for="rir in guiData.rirs" :key="rir.key">
+    @change="filterRirs($event.target.selectedOptions)">
-            <option x-bind:value="rir.key" x-text="rir.attributes.label"></option>
+  <template x-for="rir in guiData.rirs" :key="rir.key">
-        </template>
+   <option x-bind:value="rir.key" x-text="rir.attributes.label"></option>
-    </select>
+  </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>