L'element select

Jean-Dadet Luyalu Dr. Diasoluka

Description

.!. ATTENTION .!.
I. Quand vous avez un élément « select » avec par exemple un ID « id=list », l’instruction suivante :
document.getElementById("list").value="NIMPORTEQUOI";
sélectionne donc l’option qui a la value « NIMPORTEQUOI ». Si aucune option n’a la va-lue == NIMPORTEQUOI, toutes les options seront désélectionnées.

Informations

• Publié par: diasoluyalu
• Publié le: 11 mars 2019
• Nombre de lectures: 0
• Langue: Français
• Poids de l'ouvrage: 2 Mo

Extrait

L’ ÉLÉMENTEN JAVASCRIPT <SELECT> P o u r D é b u t a n t J AVA S C R I P T (Programmation Internet) V O L . X X I V J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga +243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818 [e-mail]

I.L’ÉLÉMENT SELECT: L’élément «select» est très important et est le substratum quand on doit choisir dans une Liste Déroulante(Drop Down List) = liste de choix. C’est un élément richissime qui pos sède beaucoup de fonctionnalités et offre une quasi infinité de possibilités dont nous al lons parcourir ici quelquesunes. Quand on ne maîtrise pas cet élément (SELECT) il paraît vraiment comme rébarbatif mais comme on le verra ciaprès, c’est un élémentpourtant très facile et très intéressant à utili ser, rendant la programmation en JavaScript plus agréable que jouer au puzzle ou au scrabble. De plus sans lui on ne peut ni avoir les listes déroulantes de choix, ni pouvoir les utiliser sans passer par des procédures réservées aux génies. L’élément «select» doit avoir un attribut ou propriéténame (nom)et/ou uneID, et un EventListenerqui est souvent et de façon plus pratique «onchange». L’EventHandler «onselect» n’agit pas, tandis que le «onKeyUp» n’agit que quand la touche est «RETURN» ou une destouches de con trôleet même la touche «ESCAPE» = «ÉCHAP» est appuyée puis relâchée après sé lection et ce autant de fois qu’on les frappe. Cet aspect est très important car une même action peut « rafaler » sans contrôle. La propriété «value» est la valeur renvoyée avec le formulaire «form» quand celleci est envoyée («submitted»). La «value» de l’élément «select» est celle del’option sélectionnée. Au chargement, c’est la dernièreoption présélectionnée qui est retenue comme sélectionnée. La propriété «text» est le texte qui apparaît dans le «drop down box». La propriété «selectedOptions» de «HTMLSelectElementPrototype» liste toutes les options sélectionnées. Voici quelques exploitations de cette propriété. <selectclass=cSelsize=10multiple> <optionvalue="AUR">Aura</option> <optionvalue="AMB">Amblyopie</option>

J.D.B. DIASOLUKA Nz. Luyalu  JavaScript Tome-XXIV <optionvalue="AMR"selected=true>Amaurose</option> <optionvalue="CCT">Cécité Corticale</option> <optionvalue="SCC">Scotome Central</option> <optionvalue="SCS"selected="selected">Scotome Scintillant</option> <optionvalue="SCP">Scotome Positif</option> <optionvalue="SCN">Scotome Négatif</option> <optionvalue="PST"selected>Post-Image</option> <optionvalue="MCT">Migraines Cataméniales</option> </select> <scripttype="text/javascript">"use strict"; consts=document.querySelector(".cSel"), sv=s.value, si=s.selectedIndex, so=s.selectedOptions; for(letiinso)console.log(so[i]) // => <option value="AMR" selected="true"> // => <option value="SCS" selected="selected"> // => <option value="PST" selected=""> // => function item() // => function namedItem() // => 3 for(letiofso)console.log(i)// Mieux que le for...in // => <option value="AMR" selected="true"> // => <option value="SCS" selected="selected"> // => <option value="PST" selected=""> for(leti=0,l=so.length;i<l;i++)// Mieux que for...in console.log(so[i]) // => <option value="AMR" selected="true"> // => <option value="SCS" selected="selected"> // => <option value="PST" selected=""> console.dir("s.value =",sv); // s.value = AMR console.dir("s.selectedIndex =",si); // s.selectedIndex = 2 console.log("value de s.selectedIndex =",s[si]); // value de s.selectedIndex = value="AMR" selected="true">// <option console.log("value de s.selectedIndex =",s[si].value); // value de s.selectedIndex = AMR console.log("text de s.selectedIndex =",s[si].text); // text de s.selectedIndex = Amaurose console.log("textContent de s.selectedIndex =",s[si].textContent); // textContent de s.selectedIndex = Amaurose console.log("innerHTML de s.selectedIndex =",s[si].innerHTML); L’élément < Select > 2 / 93  - 6. mars 2019 (12:28 )- mercredi,

J.D.B. DIASOLUKA Nz. Luyalu  JavaScript Tome-XXIV // innerHTML de s.selectedIndex = Amaurose console.log("outerHTML de s.selectedIndex =",s[si].outerHTML); // outerHTML de s.selectedIndex = value="AMR" selected="true">Amaurose</option>// <option console.log("innerText de s.selectedIndex =",s[si].innerText); // innerText de s.selectedIndex = Amaurose console.dir("s.selectedOptions =",so); // s.selectedOptions = // HTMLCollection(3) // 0: <option value="AMR" selected="true"> <option value="SCS" selected="selected">// 1: <option value="PST" selected="">// 2: 3// length: // <prototype>: HTMLCollectionPrototype { // item: item(), namedItem: namedItem(), length: Getter, //…} </script> Exécution : La boucle «for in» liste même des éléments internes «cachés».

La boucle «for of» ne liste que les éléments attendus (ceux qui nous concernent directement).

Voicil’essentiel de la gestion de «Select » : Cet exemple vaut pour les sélections multiples. <selectsize=7class="sid"multiple>  <optionvalue="Lc">Leucome cornée</option>  <optionvalue="Xe"selected>Xérophtalmie</option>  <optionvalue="Ca">Cataracte</option> L’élément < Select > 6. mars 2019 (12:28 )- mercredi, 3 / 93  -

J.D.B. DIASOLUKA Nz. Luyalu  JavaScript Tome-XXIV  <optionvalue="Gl"selected="selected">Glaucome</option>  <optionvalue="Tr">Blunt Trauma</option>  <optionvalue="Np"selected="selected">Neurapraxis</option>  <optionvalue="Hc"selected="selected">Hemispherectomie</option> </select> <br> <ahref="javascript:void(0)"id="order">Lister Sélections</a> <divid="dispMsg"></div> <scripttype="text/javascript">"use strict"; letgoBut = document.getElementById("order"); lets = document.querySelector(".sid"); letdispMsgBox = document.getElementById("dispMsg"); goBut.addEventListener("click",function() { letselOpts = s.selectedOptions; letdispMsg =""; for(leti=0,l=selOpts.length;i<l;i++) { if(dispMsg ==="") {  dispMsg ="<br>Les Selected:"; }  dispMsg +="<br>"; dispMsg += selOpts[i].value+" (=> "; dispMsg += selOpts[i].label+" = "; dispMsg += selOpts[i].textContent+" = "; dispMsg += selOpts[i].text+")"; // Conjonctions if(i === (selOpts.length-2) && (selOpts.length<3)) {  dispMsg +=" & "; }else if(i < (selOpts.length-2)) {  dispMsg +=", "; }else if(i === (selOpts.length-2)) {  dispMsg +=", et "; }  } // Fin Conjonctions if(!dispMsg) {  dispMsg ="Aucune maladie trouvée!"; }  dispMsgBox.innerHTML= dispMsg; },false); </script>

L’élément < Select >  - - mercredi, 4 / 93 6. mars 2019 (12:28 )

J.D.B. DIASOLUKA Nz. Luyalu  JavaScript Tome-XXIV <selectsize=3onChange="fct(this,this.value);"id="sid"> <optionvalue="Xe">Xérophtalmie</option> <optionvalue="Ca">Cataracte</option> <optionvalue="Gl"selected="selected">Glaucome</option> <optionvalue="Tr">Blunt Trauma</option> <optionvalue="Np"selected="selected">Neurapraxis</option> <optionvalue="Hc"selected="selected">Hemispherectomie</option> </select> <scripttype="text/javascript">'use strict'; constfct=(s,v)=>{ console.log("La value de l'option sélectionnée est =",v); console.log("s[s.selectedIndex].text =", s[s.selectedIndex].text); console.log("s.selectedOptions[0].text =", s.selectedOptions[0].text); } </script> Exécution :

 < Ceci, au chargement !

Quand aucune option n’est sélectionnée, aucune d’entre elles ne sera automatiquement sélectionnée. Mais quand plusieurs options sont sélectionnées, il y a deux possibiités : 1. Si l’attribut «multiple» est spécifié => toutes les options sélectionnées seront sélec tionnées ;  <selectid="iSel"class="cSel"multiple size=5>  <optionvalue="eb">EBALE</option>  <optionvalue="sn">SANI</option>

L’élément < Select > - mercredi, 6. mars 2019 (12:28 ) - 5 / 93

J.D.B. DIASOLUKA Nz. Luyalu Tome- JavaScript XXIV  <optionvalue="ep"selected>EPASOLA</option>  <optionvalue="nz">NZETE</option>  <optionvalue="eb"selected>EBALE</option>  </select> Notez dans le code source cidessus quel’ «option» avec la «value» (et son «la beloutexte» identique «EBALE») sont repris deux fois, la première fois non sélec tionnée, la deuxième fois sélectionnée.Cela a été respecté dans l’affichageavec Yan dex & QupZilla cidessous à gauche avec sélection en gris, et Firefox avec sélection en bleu. Si on rafraîchit la page, tout est sta tus quo avec yandex et QupZilla ; tandis qu’avec Firefox quand on ra fraîchit la page, la première occur rence de l’option avec «va lue="eb"» et label = «EBALE» devient aussi sélectionnée. 2. Si l’attribut «multiple»n’est pas spécifié =>c’est la dernière option rencontrée dans la liste à sélection multiple qui est automatiquement sélectionnée [avec les trois navi gateurs].  <selectid="iSel"class="cSel"size=5>  <optionvalue="eb">EBALE</option>  <optionvalue="sn">SANI</option>  <optionvalue="ep"selected>EPASOLA</option>  <optionvalue="nz">NZETE</option>  <optionvalue="eb"selected>EBALE</option>  </select>

3. Bien entendu, si «multiple» est spécifié alors qu’aucun élément n’est sélectionné, il n’aura aucun effet.  <selectid="iSel"class="cSel"multiple size=5>  <optionvalue="eb">EBALE</option>  <optionvalue="sn">SANI</option>  <optionvalue="ep">EPASOLA</option>  <optionvalue="nz">NZETE</option>  <optionvalue="eb">EBALE</option>  </select>

L’élément < Select > 6 / 93  - 6. mars 2019 (12:28 )- mercredi,

J.D.B. DIASOLUKA Nz. Luyalu Tome- JavaScript XXIV

L’accès à unélément HTML/DOMpeut se faire de plusieurs manières, soit avec un «do cument . getElementById ( )» ou un peu plus délicatement (en respectant le point de vant le om de classe) avec un «document . querySelector ( )», soit très péniblement avec un «document . getElementsByName ( )». La méthode «document . querySelector ( )» utilisée avecl’attribut «class =» a exac tement le même effet que la méthode «document . getElementById ( )» utilisée avec l’attrbut «id =». Utilisonsla version avec l’attribut «multiple» spécifié, et appuyons le bouton « SUBMIT » après rafraîchissement de la page. <form>  <selectid="iSel"class="cSel"size=5multiple>  <optionvalue="eb">EBALE</option>  <optionvalue="sn">SANI</option>  <optionvalue="ep"selected>EPASOLA</option>  <optionvalue="nz">NZETE</option>  <optionvalue="eb"selected>EBALE</option>  </select> </form> <ahref="javascript:void(f())">SUBMIT</a> <script>"use strict"; constf= _ => { consts = document.getElementById('iSel'); // Notez l'absence de point devant le nom d'id « iSel » console.log(s.value); constc = document.querySelector('.cSel'); // Notez le point devant le nom de classe « cSel ». console.log(s.value); constss = s.selectedOptions; constcs = c.selectedOptions; console.log(ss); console.log(cs); for(letiofss) console.log(`${".".repeat(3)} ${ i.value}`); for(letiofcs) console.log(`${".".repeat(9)} ${ i.value}`); } </script>

L’élément < Select >  - 7 / 93 - mercredi, 6. mars 2019 (12:28 )

J.D.B. DIASOLUKA Nz. Luyalu Tome- JavaScript XXIV Avec Firefox :

yId('iSel'); Issu de document.getElementB

Issu de document.querySelector('.cSel');

Avec Yandex (QupZilla n’a pas de fenêtre de la console):

Issu de document.getElementById('iSel');

L’élément < Select > 8 / 93  - - mercredi, 6. mars 2019 (12:28 )

J.D.B. DIASOLUKA Nz. Luyalu  JavaScript Tome-XXIV

Issu de document.que rySelector('.cSel');

Listage de TOUTES les options (les sélectionnées et non), via la méthode «getEle mentsByName», en indiquant celles qui sont sélectionnées : <selectname="nSel"size=5multiple>  <optionvalue="eb">EBALE</option>  <optionvalue="sn">SANI</option>  <optionvalue="ep"selected="selected">EPASOLA</option>  <optionvalue="nz">NZETE</option>  <optionvalue="eb"selected="selected">EBALE</option>  </select> <br><buttononclick="f()">SUBMIT</button> <script>"use strict"; constf= _ => { consts = document.getElementsByName('nSel'); // Notez l'absence de point devant le nom d'id « iSel » lett=""; for(letiofs[0]) {  t=`${ i.value}<=>${ i.innerHTML}`; if(i.selected)t+=" Selected."; console.log(t); }  } </script> Avec Firefox : Trois options sélectionnées.

Avec Yandex : Deux options seulement sélectionnées.

L’élément < Select >  - - mercredi, 9 / 93 6. mars 2019 (12:28 )

J.D.B. DIASOLUKA Nz. Luyalu  JavaScript Tome-XXIV

Accèsà l’élément« Select » et ses options, via DOM : Les quatre versions/codes ciaprès font exactement la même chose, ce sont des façons différentes d’accéder à un élément DOM. <formname="fname">  <selectname="sname"onchange="fgo()">  <optionstyle="background:#979196;color:#CDDCB6"> Choix </option>  <option>Volume</option>  <option>Auteur</option>  <option>Année</option>  <option>Prix</option>  </select> </form> <scripttype="text/javascript">"use strict"; letfgo= _ => { varselVal = fname.sname.options[  fname.sname.selectedIndex ].value; varselText = fname.sname.options[  fname.sname.selectedIndex ].text; if(selVal=="Choix");// Ne faites rien! else{  console.log(selVal,selText)  console.log(selVal.padStart(35,"."))  console.log(selText.padEnd(35,"*"))  } } </script> <formname="fname">  <selectname="sname"onchange="fgo(fname)">  <optionstyle="background:#979196;color:#CDDCB6"> Choix </option>  <option>Volume</option>  <option>Auteur</option>  <option>Année</option>  <option>Prix</option>  </select> </form>

L’élément < Select >  - 6. mars 2019 (12:28 )- mercredi, 10 / 93

J.D.B. DIASOLUKA Nz. Luyalu  JavaScript Tome-XXIV <scripttype="text/javascript">"use strict"; letfgo= p => { varselVal = p.sname.options[  p.sname.selectedIndex ].value; varselText = p.sname.options[  p.sname.selectedIndex ].text; if(selVal=="Choix");// Ne faites rien! else{  console.log(selVal,selText)  console.log(selVal.padStart(35,"."))  console.log(selText.padEnd(35,"*"))  } } </script> <formname="fname">  <selectname="sname"onchange="fgo(fname)">  <optionstyle="background:#979196;color:#CDDCB6"> Choix </option>  <option>Volume</option>  <option>Auteur</option>  <option>Année</option>  <option>Prix</option>  </select> </form> <scripttype="text/javascript">"use strict"; letfgo= p => { letel=p.sname; varselVal = el.options[  el.selectedIndex ].value; varselText = el.options[  el.selectedIndex ].text; if(selVal=="Choix");// Ne faites rien! else{  console.log(selVal,selText)  console.log(selVal.padStart(35,"."))  console.log(selText.padEnd(35,"*"))  } } </script> <formname="fname">  <selectname="sname"onchange="fgo(this)">  <optionstyle="background:#979196;color:#CDDCB6"> Choix </option>  <option>Volume</option>  <option>Auteur</option>  <option>Année</option>  <option>Prix</option>

L’élément < Select > - mercredi, 6. mars 2019 (12:28 ) - 11 / 93