Select multiple avec une limite et une réinitialisation
par
, 19/04/2018 à 22h18 (923 Affichages)
L'utilisateur doit pouvoir se tromper ou changer d'avis, il doit donc y avoir un "reset" disponible.
C'est la gestion de ce "reset" qui a été la partie la plus énervante de ce code. J'ai découvert qu'il est impossible de mélanger un <input type="reset"> avec un document.querySelector( 'maForm' ).reset().
De même, un dispachEvent() sur le "reset" ou un document.querySelector( 'maForm' ).reset() sont capricieux.
Il a fallu que j'utilise un button classique avec une réinitialisation "manuelle" et que je double une condition if pour y arriver.
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 <form id="interetForm"> <p> <label for="interet">Vous pouvez sélectionné, au maximum, 10 options : </label> </p> <p> <output id="nbOpSel"></output> <!-- contiendra le nombre d'option sélectionnées--> </p> <p> <output id="result"></output> <!-- contiendra la liste des options sélectionnées--> </p> <p> <button id="btnReset">Réinitialiser</button> <!-- l'utilisateur doit pouvoir changer d'avis --> </p> <select id="interet" size="10" multiple></select> <option value="musique">Musique</option> <option value="cinema">Cinema</option> <option value="sport">Sport</option> <option value="jeuvideo">Jeu-Vidéo</option> <option value="lecture">Lecture</option> <option value="musique2">Musique2</option> <option value="cinema2">Cinema2</option> <option value="sport2">Sport2</option> <option value="jeuvideo2">Jeu-Vidéo2</option> <option value="lecture2">Lecture2</option> <option value="musique3">Musique3</option> <option value="cinema3">Cinema3</option> <option value="sport3">Sport3</option> <option value="jeuvideo3">Jeu-Vidéo3</option> <option value="lecture3">Lecture3</option> <option value="musique4">Musique4</option> <option value="cinema4">Cinema4</option> <option value="sport4">Sport4</option> <option value="jeuvideo4">Jeu-Vidéo4</option> <option value="lecture4">Lecture4</option> </select> </form>
Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75 window.addEventListener('load', ev => { // le DOM est construit et la page web est visible // début code du test const elemInteret = document.querySelector( '#interet' ), elemNbOpSel = document.querySelector( '#nbOpSel' ), elemBtnReset = document.querySelector( '#btnReset' ), elemResult = document.querySelector( '#result' ); let arOptSel = [], // contiendra les options sélectionnées limite = 10; // nombre maximum d'option sélectionables /* * select : gestion du nombres d'option sélectionnées */ elemInteret.addEventListener( 'change', ev => { arOptSel = Array.from( ev.target.selectedOptions ); let arOptSelLength = arOptSel.length, str = ""; for ( const opt of arOptSel ){ str += opt.value + ', '; } elemResult.value = str; if ( arOptSelLength < limite ){ elemNbOpSel.value = `Vous avez sélectionné ${ arOptSelLength } options`; } else if ( arOptSelLength === limite ) { elemNbOpSel.value = `Vous avez sélectionné ${ arOptSelLength } options`; elemInteret.setAttribute( 'disabled', 'disabled' ); } else if ( arOptSelLength > limite ){ elemNbOpSel.value = `Erreur ! ${ arOptSelLength } options sélectionnées`; elemInteret.setAttribute( 'disabled', 'disabled' ); } /* * Si l'utilisateur à sélectionné plus de 10 options (shift + clic) * il faut réinitialiser le forùulaire */ setTimeout( () => { if ( arOptSelLength > limite && elemInteret.getAttribute( 'disabled' ) === 'disabled' ) { document.querySelector( '#interetForm' ).reset(); elemInteret.removeAttribute( 'disabled' ); } }, 1500 ); }, { capture: false, passive: true, once: false } ); /* * button réinitialiser : gestion manuelle */ elemBtnReset.addEventListener( 'click', ev => { for ( const opt of Array.from( elemInteret.querySelectorAll( 'option' ) ) ){ opt.removeAttribute( 'selected' ); } elemInteret.removeAttribute( 'disabled' ); }, { capture: false, passive: true, once: false } ); // fin code du test }, { capture: false, passive: true, once: false } );
Exemple
Nota bene pour les utilisateurs de Firefox
J'ai adopté les modules ES2015 partout, c'est tellement pratique, mais Firefox est en retard par rapport à Chrome et Edge, voir Can I use module : https://caniuse.com/#search=module.
La sortie de Firefox 60 (normal) est prévue pour le 2018-05-09 (https://wiki.mozilla.org/RapidRelease/Calendar)
EDIT 2018-04-20
Si l'on remplace le <input type="reset"> par <button type="reset">Réinitialiser</button> on peut alors utiliser un bouton réinitialiser et document.querySelector( '#formChoix' ).reset(); dans le même formulaire.
Voir mon exemple pour des checkbox : https://www.developpez.net/forums/d1.../#post10178584
Licence Creative Commons Attribution 2.0 Belgique