L'element SELECT en HTML-XHTML-DOM-JavaScript
publicité
L’ ÉLÉMENT <SELECT> EN JAVASCRIPT Pour Débutant 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 [email protected] 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 possède beaucoup de fonctionnalités et offre une quasi infinité de possibilités dont nous allons 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ément pourtant très facile et très intéressant à utiliser, 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 une ID, et un EventListener qui 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 des touches de contrôle et 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 de l’option sélectionnée. Au chargement, c’est la dernière option 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é. <select class=cSel size=10 multiple> <option value="AUR">Aura</option> <option value="AMB">Amblyopie</option> J.D.B. DIASOLUKA Nz. Luyalu <option <option <option <option <option <option <option <option </select> JavaScript Tome- XXIV value="AMR" selected=true>Amaurose</option> value="CCT">Cécité Corticale</option> value="SCC">Scotome Central</option> value="SCS" selected="selected">Scotome Scintillant</option> value="SCP">Scotome Positif</option> value="SCN">Scotome Négatif</option> value="PST" selected>Post-Image</option> value="MCT">Migraines Cataméniales</option> <script type="text/javascript"> "use strict"; const s = document.querySelector(".cSel"), sv = s.value, si = s.selectedIndex, so = s.selectedOptions; // // // // // // for(let i in so) console.log(so[i]) => <option value="AMR" selected="true"> => <option value="SCS" selected="selected"> => <option value="PST" selected=""> => function item() => function namedItem() => 3 for(let i of so) console.log(i) // Mieux que le for...in // => <option value="AMR" selected="true"> // => <option value="SCS" selected="selected"> // => <option value="PST" selected=""> for(let i=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 = // <option value="AMR" selected="true"> 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 - dimanche, 26. mai 2019 (1:02 ) 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 = // <option value="AMR" selected="true">Amaurose</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"> // 1: <option value="SCS" selected="selected"> // 2: <option value="PST" selected=""> // length: 3 // <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). Voici l’essentiel de la gestion de « Select » : Cet exemple vaut pour les sélections multiples. <select size=7 class="sid" multiple> <option value="Lc">Leucome cornée</option> <option value="Xe" selected>Xérophtalmie</option> <option value="Ca">Cataracte</option> L’élément < Select > - 3 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu <option <option <option <option </select> JavaScript Tome- XXIV value="Gl" selected="selected">Glaucome</option> value="Tr">Blunt Trauma</option> value="Np" selected="selected">Neurapraxis</option> value="Hc" selected="selected">Hemispherectomie</option> <br> <a href="javascript:void(0)" id="order">Lister Sélections</a> <div id="dispMsg"></div> <script type="text/javascript"> "use strict"; let goBut = document.getElementById("order"); let s = document.querySelector(".sid"); let dispMsgBox = document.getElementById("dispMsg"); goBut.addEventListener("click", function() { let selOpts = s.selectedOptions; let dispMsg = ""; for (let i=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 > - 4 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV <select size=3 onChange="fct(this,this.value);" id="sid"> <option value="Xe">Xérophtalmie</option> <option value="Ca">Cataracte</option> <option value="Gl" selected="selected">Glaucome</option> <option value="Tr">Blunt Trauma</option> <option value="Np" selected="selected">Neurapraxis</option> <option value="Hc" selected="selected">Hemispherectomie</option> </select> <script type="text/javascript"> 'use strict'; const fct = (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électionnées ; <select id="iSel" class="cSel" multiple size=5> <option value="eb">EBALE</option> <option value="sn">SANI</option> L’élément < Select > - 5 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV <option value="ep" selected>EPASOLA</option> <option value="nz">NZETE</option> <option value="eb" selected>EBALE</option> </select> Notez dans le code source ci-dessus que l’ « option » avec la « value » (et son « label ou texte » identique « EBALE ») sont repris deux fois, la première fois non sélectionnée, la deuxième fois sélectionnée. Cela a été respecté dans l’affichage avec Yandex & QupZilla ci-dessous à gauche avec sélection en gris, et Firefox avec sélection en bleu. Si on rafraîchit la page, tout est status quo avec yandex et QupZilla ; tandis qu’avec Firefox quand on rafraîchit la page, la première occurrence de l’option avec « value="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 navigateurs]. <select id="iSel" class="cSel" size=5> <option value="eb">EBALE</option> <option value="sn">SANI</option> <option value="ep" selected>EPASOLA</option> <option value="nz">NZETE</option> <option value="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. <select id="iSel" class="cSel" multiple size=5> <option value="eb">EBALE</option> <option value="sn">SANI</option> <option value="ep">EPASOLA</option> <option value="nz">NZETE</option> <option value="eb">EBALE</option> </select> L’élément < Select > - 6 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV L’accès à un élément HTML/DOM peut se faire de plusieurs manières, soit avec un « document . getElementById ( ) » ou un peu plus délicatement (en respectant le point devant le om de classe) avec un « document . querySelector ( ) », soit très péniblement avec un « document . getElementsByName ( ) ». La méthode « document . querySelector ( ) » utilisée avec l’attribut « class = » a exactement le même effet que la méthode « document . getElementById ( ) » utilisée avec l’attrbut « id = ». Utilisons la version avec l’attribut « multiple » spécifié, et appuyons le bouton « SUBMIT » après rafraîchissement de la page. <form> <select id="iSel" class="cSel" size=5 multiple> <option value="eb">EBALE</option> <option value="sn">SANI</option> <option value="ep" selected>EPASOLA</option> <option value="nz">NZETE</option> <option value="eb" selected>EBALE</option> </select> </form> <a href="javascript:void(f())">SUBMIT</a> <script> "use strict"; const f = _ => { const s = document.getElementById('iSel'); // Notez l'absence de point devant le nom d'id « iSel » console.log(s.value) ; const c = document.querySelector('.cSel'); // Notez le point devant le nom de classe « cSel ». console.log(s.value) ; const ss = s.selectedOptions ; const cs = c.selectedOptions ; console.log(ss); console.log(cs); for(let i of ss) console.log(`${".".repeat(3)} ${ i.value }`); for(let i of cs) console.log(`${".".repeat(9)} ${ i.value }`); } </script> L’élément < Select > - 7 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Avec Firefox : Issu de document.getElementById('iSel'); 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 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Issu de document.querySelector('.cSel'); Listage de TOUTES les options (les sélectionnées et non), via la méthode « getElementsByName », en indiquant celles qui sont sélectionnées : <select name="nSel" size=5 multiple> <option value="eb">EBALE</option> <option value="sn">SANI</option> <option value="ep" selected="selected">EPASOLA</option> <option value="nz">NZETE</option> <option value="eb" selected="selected">EBALE</option> </select> <br><button onclick="f()">SUBMIT</button> <script> "use strict"; const f = _ => { const s = document.getElementsByName('nSel'); // Notez l'absence de point devant le nom d'id « iSel » let t=""; for(let i of s[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 > - 9 / 93 - dimanche, 26. mai 2019 (1:02 ) 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. <form name="fname"> <select name="sname" onchange="fgo()"> <option style="background:#979196;color:#CDDCB6"> Choix </option> <option>Volume</option> <option>Auteur</option> <option>Année</option> <option>Prix</option> </select> </form> <script type="text/javascript"> "use strict"; let fgo = _ => { var selVal = fname.sname.options[ fname.sname.selectedIndex ].value; var selText = 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> <form name="fname"> <select name="sname" onchange="fgo(fname)"> <option style="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 > - 10 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV <script type="text/javascript"> "use strict"; let fgo = p => { var selVal = p.sname.options[ p.sname.selectedIndex ].value; var selText = 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> <form name="fname"> <select name="sname" onchange="fgo(fname)"> <option style="background:#979196;color:#CDDCB6"> Choix </option> <option>Volume</option> <option>Auteur</option> <option>Année</option> <option>Prix</option> </select> </form> <script type="text/javascript"> "use strict"; let fgo = p => { let el=p.sname; var selVal = el.options[ el.selectedIndex ].value; var selText = 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> <form name="fname"> <select name="sname" onchange="fgo(this)"> <option style="background:#979196;color:#CDDCB6"> Choix </option> <option>Volume</option> <option>Auteur</option> <option>Année</option> <option>Prix</option> L’élément < Select > - 11 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV </select> </form> <script type="text/javascript"> "use strict"; let fgo = p => { const el=p; var selVal = el.options[ el.selectedIndex ].value; var selText = 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> Exécution: D’autres possibilités : <form name="fName"> <textarea name="iName" style="width:330;height:80"> </textarea> <br>OnChange<br> <select size=3 name="sName" style="width:100"> <option value="Glaucome spl">Gl</option> <option value="Neurapraxis">Np</option> <option value="Xérophtalmie">Xo</option> <option value="Gérontoxon" selected=true>Ge</option> <option value="Commotion Oc">Blunt</option> </select> L’élément < Select > - 12 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV </form> <script type="text/javascript"> const f_act = _ =>{ var d = fName.iName; d.value += "Selected Option value: "+s.value+" | "; } var s = fName.sName; s.addEventListener("change", f_act); </script> Voici un exemple avec « document.getElementsByName » : On obtient bien l’index de l’option sélectionnée, de là à obtenir la value et le text il ne reste qu’un pas (voir page 38 : IV. Avec la « id » ou le « name » de l’élément SELECT). <form name="fName"> <textarea name="iName" style="width:700;height:215"> </textarea> <br>OnChange<br> <select size=3 name="sName" class="sClass" style="width:100"> <option value="88">Huit-Huit</option> <option value="Mn">Mélanome</option> <option value="Nv">Naevus</option> <option value="Lc">Leucodermie</option> <option value="Vi">Vitiligo</option> </select> </form> <script type="text/javascript"> let s = document.getElementsByName("sName"); const f_act = _ =>{ var d = fName.iName; d.value += "document.getElementsByName('sName'): "+s+"\n"; d.value += "document.getElementsByName('sName')[0]: "+s[0]+"\n"; d.value += "document.getElementsByName('sName')[0].options: "+ L’élément < Select > - 13 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV s[0].options+"\n"; d.value += "document.getElementsByName('sName')[0].options.selectedIndex: "+ s[0].options.selectedIndex+"\n\n"; console.log("*".repeat(3)," document.getElementsByName('sName'): ",s); console.log("document.getElementsByName('sName')[0]: ",s[0]); console.log("document.getElementsByName('sName')[0].options: ", s[0].options); console.log( "document.getElementsByName('sName')[0].options.selectedIndex => ", s[0].options.selectedIndex+"\n\n"); } var l = document.querySelector (".sClass"); l.addEventListener("change", f_act); </script> Dans la Division : Dans la console : L’élément < Select > - 14 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Voici un exemple avec « document.querySelector » : <div class="dClass"></div> <div class="dClass" style="height:30"> 2è dClass ignoré par le QUERYSELECTOR </div> OnChange<br> <select size=3 style="width:100"> <option value="Glaucome">Gl</option> <option value="Neurapraxis">Np</option> <option value="Xérophtalmie">Xo</option> <option value="Gérontoxon" selected=true>Ge</option> <option value="Commotion">Blunt</option> </select> <select size=3 style="width:100" onclick="alert('2è SELECT ignoré par QUERYSELECTOR')"> <option value="Mélanome">Ml</option> <option value="Naevus">Nv</option> <option value="Pemphigus">Pp</option> <option value="Leucodermie" selected>Ld</option> </select> <script type="text/javascript"> const f_act = _ =>{ var d = document.querySelector('.dClass'); // Seulement la première class cClass rencontrée. // Remarquez aussi le point (.) dans .dClass. console.log( d.value = "Value de l'option sélectionnée : "+ L’élément < Select > - 15 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV s.value); d.textContent += "Selected Option Value: "+s.value; d.innerHTML += " | "; } var s = document.querySelector('select'); // Seulement le premier élément SELECT rencontré. s.addEventListener("change", f_act); </script> <- Au lancé. Dans le document : Dans la console: Voci un exemple avec « document.getElementById » : <select id="sid"> <option value="1">Xérophtalmie</option> <option value="2">Cataracte</option> <option value="3" selected="selected">Glaucome</option> <option value="4">Blunt Trauma</option> <option value="5" selected="selected">Neurapraxis</option> <option value="6" selected="selected">Hemispherectomie</option> </select> <script type="text/javascript"> 'use strict'; let s = document.getElementById("sid"); let i = s.selectedIndex; L’élément < Select > - 16 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV let o = s.selectedOptions; console.log( "s =",document.getElementById("sid") ); // <select id="sid"> console.log( "s.value =",s.value ); // s.value = 6 console.log( "s.textContent =",s.textContent ); // s.textContent = // Xérophtalmie // Cataracte // Glaucome // Blunt Trauma // Neurapraxis // Hemispherectomie console.log( "s.selectedIndex =",i ); // s.selectedIndex = 5 console.log( "s.selectedOptions =",o ); // s.selectedOptions = HTMLCollection [ option ] console.log( "s.value =",s.value); // s.value = 6 console.log( "s[i] =",s[i]); // s[i] = <option value="6" selected="selected"> console.log( "s[i].value =",s[i].value); // s[i].value = 6 console.log( "s[o] =",s[o] ); // s[o] = undefined console.log( "s[i].text =",s[i].text); // Hemispherectomie console.log( "s[i].textContent =",s[i].textContent ); // Hemispherectomie console.log( "document.getElementById('sid').selectedOptions[0].value =", document.getElementById('sid').selectedOptions[0].value); // // document.getElementById('sid').selectedOptions[0].value = 6 console.log( "o[0].value =",o[0].value ); // o[0].value = 6 console.log( "o[0] =",o[0] ); // // o[0] = <option value="6" selected="selected"> </script> Exécution : L’élément < Select > - 17 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Avec Firefox : Avec Yandex : L’élément < Select > - 18 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Un peu plus de détails / possibilités : <form name="nForm"> <select class="clist" name="nlist" id="ilist" onmouseover="f()"> <option value="88">Classe1</option> <option value="72">Classe2</option> <option value="53" selected=selected>Classe3</option> <option value="97">Classe4</option> <option value="39">Classe5</option> </select> </form> <script type="text/javascript"> "use strict"; console.log(`=`.repeat(30)+`\nAvec NAME\n`+`=`.repeat(30)) console.log( `document.nForm.nlist =`, document.nForm.nlist+`\n\n`); console.log( `document.nForm.nlist.value =`, document.nForm.nlist.value+`\n\n`); console.log( `document.nForm.nlist.textContent =`, document.nForm.nlist.textContent+`\n\n`); console.log( `document.nForm.nlist.options =`, document.nForm.nlist.options+`\n\n`); L’élément < Select > - 19 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV console.log( `document.nForm.nlist.options.selectedIndex =`, document.nForm.nlist.options.selectedIndex+`\n\n`); console.log( `document.nForm.nlist.options [document.nForm.nlist.options.selectedIndex] =` , document.nForm.nlist.options [document.nForm.nlist.options.selectedIndex]+`\n\n`); console.log( `document.nForm.nlist.options [document.nForm.nlist.options.selectedIndex].value =`, document.nForm.nlist.options [document.nForm.nlist.options.selectedIndex].value+`\n\n`); console.log( `document.nForm.nlist.options [document.nForm.nlist.options.selectedIndex].text =`, document.nForm.nlist.options [document.nForm.nlist.options.selectedIndex].text+`\n\n`); console.log( `document.nForm.nlist.options [document.nForm.nlist.options.selectedIndex].textContent =`, document.nForm.nlist.options [document.nForm.nlist.options.selectedIndex].textContent+`\n\n`); console.log(`=`.repeat(30)+`\nAvec CLASS\n`+`=`.repeat(30)) console.log( `document.querySelector('.clist').innerHTML =`, document.querySelector('.clist').innerHTML+`\n\n`); console.log( `document.querySelector('.clist').selectedIndex.value =`, document.querySelector('.clist').selectedIndex.value+`\n\n`); console.log( `document.querySelector('.clist') [document.querySelector('.clist').selectedIndex] =`, document.querySelector('.clist') [document.querySelector('.clist').selectedIndex]+`\n\n`); console.log( `document.querySelector('.clist') [document.querySelector('.clist').selectedIndex].value =`, document.querySelector('.clist') [document.querySelector('.clist').selectedIndex].value+`\n\n`); console.log( `document.querySelector('.clist') L’élément < Select > - 20 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV [document.querySelector('.clist').selectedIndex].text =`, document.querySelector('.clist') [document.querySelector('.clist').selectedIndex].text); console.log(`=`.repeat(30)) console.log( `document.getElementById('ilist').innerText =`); console.log(`${document.getElementById('ilist').innerText}`); </script> ScreenShots de l’exécution : L’élément < Select > - 21 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV .!. 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 value == NIMPORTEQUOI, toutes les options seront désélectionnées. document.getElementById("list").value=97; <form name="nForm"> <select name="list" id="list" onmouseover="f()"> <option value="30">Classe0</option> <option value="88">Classe1</option> <option value="72">Classe2</option> <option value="53">Classe3</option> <option value="97">Classe4</option> <option value="39">Classe5</option> <option value="13">Classe6</option> L’élément < Select > - 22 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV <option value="55">Classe7</option> <option value="98">Classe8</option> <option value="26">Classe9</option> </select> </form> <script type="text/javascript"> "use strict"; let f = _ => { document.getElementById("list").value=97; console.log( document.getElementById("list"), document.getElementsByName("list"), ) } </script> Avec donc document.getElementById("list").value=97; Exécution : -> Avec document.getElementById("list").value=970; Exécution : -> L’élément < Select > - 23 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu II. JavaScript Tome- XXIV Quand vous avez un élément select par exemple de nom « name=nsel », les instructions suivantes : document.getElementsByName("nsel").value="NIMPORTEQUOI"; peuvent soit ajouter une propriété « value » à cet élément, mais n’affectent pas la chaîne « NIMPORTEQUOI » de value à l’option sélectionnée, soit ne rien faire du tout. document.getElementsByName("list").value=97; <form name="nForm"> <select name="list" id="list" onmouseover="f()"> <option value="30">Classe0</option> <option value="88">Classe1</option> <option value="72">Classe2</option> <option value="53">Classe3</option> <option value="97">Classe4</option> <option value="39">Classe5</option> <option value="13">Classe6</option> <option value="55">Classe7</option> <option value="98">Classe8</option> <option value="26">Classe9</option> </select> </form> <script type="text/javascript"> "use strict"; let f = _ => { document.getElementsByName("list").value=97; console.log( document.getElementById("list"), document.getElementsByName("list"), ) } </script> L’élément < Select > - 24 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Avec document.getElementsByName("list").value=97; -> Avec document.getElementsByName("list").value=970; idem. Avant toute chose, signalons qu’on peut étiqueter (labeliser) les options d’une sélection : <form name="fName"> <select size=3 id="isel" name="nsel" onContextMenu="fsel(isel)"> <label for="iNY"></label> <option value="GLC">Glaucome</option> <option value="PRB" selected>Presbytie</option> <option value="NYS" id="iNY">Nystagmus</option> </select> </form> <script type="text/javascript"> "use strict"; const fsel = i => { console.log("Dans fsel(nsel)"); console.log("i.options =", i.options); console.log("i.options.selectedIndex =", i.options.selectedIndex); console.log("i.options.length =",i.options.length); console.log("i.options.iNY =",i.options.iNY); console.log("i.options[iNY] =",i.options[iNY]); // i.options[iNY] = undefined L’élément < Select > - 25 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV alert("Observez le changement de sélection") console.log( "i.options.iNY.selected=true =",i.options.iNY.selected=true); console.log("i.options.label =",i.options.label); // i.options.label = undefined console.log("i.options.item =",i.options.item); console.log("i.options.item(0) =",i.options.item(0)); } </script> Exécution : À l’affichage de la liste déroulante, « cliquez –droit » sur « Glaucome », et après avoir fermé le message pop-up vous verrez que la sélection aura passé à « Nystagmus », et lisez les messages affichés dans la console pour découvrir les propriétés de l’élément (ou objet) « option » de l’élément (encore un objet) « select ». -> 15:17:11,088 Dans fsel(nsel) test.html:13:2 15:17:11,093 i.options = HTMLOptionsCollection { 0: option, 1: option, 2: option#iNY, length: 3, selectedIndex: 1, … } test.html:14:2 i.options.selectedIndex = 1 i.options.length = 3 i.options.iNY = <option id="iNY" value="NYS"> i.options[iNY] = undefined i.options.iNY.selected=true = true i.options.label = undefined i.options.item = function item() i.options.item(0) = <option value="GLC"> test.html:15:2 test.html:16:2 test.html:17:2 test.html:19:2 test.html:23:2 test.html:26:2 test.html:29:2 test.html:30:2 15:17:11,108 15:17:11,109 15:17:11,110 15:17:11,111 15:17:15,994 15:17:15,995 15:17:15,995 15:17:15,997 Une option peut être manipulée directement et individuellement : <form name="fName"> <select size=3 id="isel" name="nsel" onWheel="fWheel()" onContextMenu="fsel(isel)" > <label for="iNY"></label> <option value="GLC" id="iGL">Glaucome</option> L’élément < Select > - 26 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV <option value="PRB" selected>Presbytie</option> <option value="NYS" id="iNY">Nystagmus</option> </select> </form> <script type="text/javascript"> "use strict"; const fsel = function(i) { console.log("Dans fsel(isel)"); console.log("i.options =", i.options); console.log("i.options.selectedIndex =", i.options.selectedIndex); console.log("i.options.length =",i.options.length); console.log("i.options.iNY =",i.options.iNY); console.log("i.options[iNY] =",i.options[iNY]); // i.options[iNY] = undefined alert("Observez le changement de sélection") console.log( "i.options.iNY.selected=true =",i.options.iNY.selected=true); console.log("i.options.label =",i.options.label); // i.options.label = undefined console.log("i.options.item =",i.options.item); console.log("i.options.item(0) =",i.options.item(0)); } // Une option peut être manipulée // individuellement et directement. const fWheel = function(){ console.log("Dans fWheel()"); alert("Observez le changement de la 'value' et du 'text' "); document.getElementById("iGL").value = "nVAL"; document.getElementById("iGL").text = "nTXT"; document.getElementById("iGL").selected = "selected"; document.getElementById("iGL").id = "nID"; // Changement de la valeur de 'id' en 'nID', // Ci-dessous, utilisation de la nouvelle 'id'. const s=document.getElementById("nID"); console.log( "s.selected =", s.selected + " , " + "s.value ",s.value + " , " + "s.text =",s.text ); } </script> Exécution : L’élément < Select > - 27 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Tout d’abord « cliquez-droit » sur « Glaucome », puis fermer le « pop-up » et le « menu contextuel », et lisez ce qui est déjà affiché dans la fenêtre de la console. Avec Yandex : -> « Click-droit » sur « Glaucome » -> -> Puis placez le curseur de la souris au-dessus du menu déroulant, et tournez très doucement le « Wheel » de la souris. De nouveau on a une notification : L’élément < Select > - 28 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Fermez ce message et notez la nouvelle option sélectionnée, mais aussi qu’elle a changé de value et de label, et lisez la suite des messages de la console. Voici l’ensemble de l’affichage dans la fenêtre de la console avec Yandex : 22:58:13.950 test.html:13 Dans fsel(isel) 22:58:13.954 test.html:14 i.options = HTMLOptionsCollection(3) [ option#iGL, option, option#iNY, iGL: option#iGL, iNY: option#iNY, selectedIndex: 1 ] 1. HTMLOptionsCollection(3) [option#iGL, option, option#iNY, iGL: option#iGL, iNY: option#iNY, selectedIndex: 1] 1. 2. 3. 4. 5. 6. 7. 0: option#nID 1: option 2: option#iNY length: 3 selectedIndex: 0 iNY: option#iNY nID: option#nID 8. __proto__: HTMLOptionsCollection 22:58:13.959 test.html:15 22:58:13.960 test.html:16 i.options.selectedIndex = 1 i.options.length = 3 22:58:13.960 test.html:17 L’élément < Select > - 29 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV i.options.iNY = <option value="NYS" id="iNY">Nystagmus</option> 22:58:13.961 22:58:15.021 22:58:15.022 22:58:15.022 22:58:15.023 test.html:19 i.options[iNY] = undefined test.html:23 i.options.iNY.selected=true = true test.html:26 i.options.label = undefined test.html:29 i.options.item = ƒ item() { [native code] } test.html:30 i.options.item(0) = <option value="GLC" id="iGL">Glaucome</option> 22:58:17.324 test.html:37 22:58:18.733 test.html:48 Dans fWheel() s.selected = true , s.value nVAL , s.text = nTXT Avec Firefox : -> -> -> -> L’élément < Select > - 30 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV 23:24:19,359 Dans fsel(isel) test.html:13:2 23:24:19,360 i.options = HTMLOptionsCollection { 0: option#iGL, 1: option, 2: option#iNY, length: 3, selectedIndex: 1, … } test.html:14:2 HTMLOptionsCollection 0: <option id="nID" value="nVAL"> 1: <option value="PRB" selected=""> 2: <option id="iNY" value="NYS"> iNY: <option id="iNY" value="NYS"> length: 3 nID: <option id="nID" value="nVAL"> selectedIndex: 0 <prototype>: HTMLOptionsCollectionPrototype { add: add(), remove: remove(), length: Getter & Setter, … } 23:24:19,364 23:24:19,365 i.options.selectedIndex = 1 i.options.length = 3 test.html:15:2 test.html:16:2 23:24:19,365 23:24:19,366 23:24:20,252 23:24:20,252 23:24:20,253 i.options.iNY = <option id="iNY" value="NYS"> i.options[iNY] = undefined i.options.iNY.selected=true = true i.options.label = undefined i.options.item = function item() test.html:17:2 test.html:19:2 test.html:23:2 test.html:26:2 test.html:29:2 23:24:20,253 i.options.item(0) = <option id="iGL" value="GLC"> test.html:30:2 23:25:26,219 23:26:37,738 Dans fWheel() s.selected = true , s.value L’élément < Select > - 31 / 93 - test.html:37:2 nVAL , s.text = nTXT test.html:48:2 dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Voyons maintenant la structure d’un objet select avec différents moyens d’acquisition de l’élément SELECT : I. Version avec « document.getElementsByName("isel") » : <select size=3 id="isel" name="nsel" onMouseOut="fsel(null)" onClick="fsel(this,1)" onChange="fsel(nsel,2)" onKeyUp="fsel(isel,3)"> <option value="NYS">Nystagmus</option> <option value="PRB" selected>Presbytie</option> <option value="GLC">Glaucome</option> </select> <script type="text/javascript"> "use strict"; const fsel = (p,q) => { console.log("Dans fsel(null)"); let s,r; if(!p){ s=document.getElementsByName("isel"); console.log(s); } } </script> Exécutions : Pointez l’ascenseur de la liste puis retirer le curseur de la souris sans parcourir les options. Avec Firefox Quantum 64.0b13 : 09:09:14,308 09:09:14,309 Dans fsel(null) test.html:14:5 NodeList [] test.html:18:7 length: 0 <prototype>: NodeListPrototype { item: item(), keys: keys(), values: values(), … } Avec Yandex Version 18.10.1.385 beta : 09:09:04.823 09:09:04.826 test.html:14 test.html:18 L’élément < Select > Dans fsel(null) NodeList [] length: 0 __proto__: NodeList - 32 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV II. Version avec « this » <select size=3 id="isel"> <option value="NYS">Nystagmus</option> <option value="PRB" selected>Presbytie</option> <option value="GLC">Glaucome</option> </select> <script type="text/javascript"> "use strict"; const fsel = _ => { console.log(s.options[s.selectedIndex].value, '=>', s.options[s.selectedIndex].text); } const s=document.getElementById("isel"); s.addEventListener("click", fsel, false); </script> Exécutions : Pointez l’ascenseur de la liste puis retirer le curseur de la souris sans parcourir les options. Avec Firefox Quantum 64.0b13 et Yandex Version 18.10.1.385 beta : III. Version avec « document . forms [ ' fName ' ] . elements [ 0 ] » : <form name="fName"> <select size=3 id="isel" name="nsel" onClick="fsel(this,1)" onChange="fsel(name,2)" onSelect="fsel(id,5)" onMouseOut="fsel(null)" onKeyUp="fsel(isel,3)" onWheel="fsel(nsel,4)"> <option value="NYS">Nystagmus</option> <option value="PRB" selected>Presbytie</option> <option value="GLC">Glaucome</option> </select> </form> <script type="text/javascript"> "use strict"; L’élément < Select > - 33 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV const fsel = (p,q) => { let s,r; if(q==4){ console.log("Dans document.forms['fName'].elements[0]"); s=document.forms['fName'].elements[0] console.log(s); } } </script> Exécution : Avec Firefox Quantum 64.0b13: 11:03:21,331 Dans Dans document.forms['fName'].elements[0] test.html:20:7 11:03:21,333 <select id="isel" size="3" name="nsel" onclick="fsel(this,1)" onchange="fsel(name,2)" onselect="fsel(id,5)" onmouseout="fsel(null)" onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)"> test.html:22:7 select#isel 0: <option value="NYS"> 1: <option value="PRB" selected=""> 2: <option value="GLC"> accessKey: "" accessKeyLabel: "" attributes: NamedNodeMap(9) [ size="3", id="isel", name="nsel", … ] childElementCount: 3 childNodes: NodeList(7) [ #text, option, #text, … ] children: HTMLCollection(3) [ option, option, option] form: <form name="fName"> id: "isel" innerHTML: "\n <option value=\"NYS\">Nystagmus</option> \n <option value=\"PRB\" selected=\"\">Presbytie</option> \n <option value=\"GLC\">Glaucome</option>\n " L’élément < Select > - 34 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV innerText: "Nystagmus\nPresbytie\nGlaucome" lastElementChild: <option value="GLC"> length: 3 localName: "select" multiple: false name: "nsel" nextSibling: #text " " nodeName: "SELECT" ... onabort: null onanimationcancel: null onanimationend: null onanimationiteration: null onanimationstart: null onauxclick: null onblur: null oncanplay: null oncanplaythrough: null onchange: function onchange() onclick: function onclick() onclose: null oncontextmenu: null oncopy: null oncut: null ondblclick: null ondrag: null ondragend: null ondragenter: null ondragexit: null ondragleave: null ondragover: null ondragstart: null ondrop: null ondurationchange: null onemptied: null onended: null onerror: null onfocus: null ongotpointercapture: null oninput: null oninvalid: null L’élément < Select > - 35 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV onkeydown: null onkeypress: null onkeyup: function onkeyup() onload: null onloadeddata: null onloadedmetadata: null onloadend: null onloadstart: null onlostpointercapture: null onmousedown: null onmouseenter: null onmouseleave: null onmousemove: null onmouseout: function onmouseout() onmouseover: null onmouseup: null onmozfullscreenchange: null onmozfullscreenerror: null onpaste: null onpause: null onplay: null onplaying: null onpointercancel: null onpointerdown: null onpointerenter: null onpointerleave: null onpointermove: null onpointerout: null onpointerover: null onpointerup: null onprogress: null onratechange: null onreset: null onresize: null onscroll: null onseeked: null onseeking: null onselect: function onselect() onselectstart: null onshow: null onstalled: null onsubmit: null onsuspend: null ontimeupdate: null ontoggle: null ontransitioncancel: null ontransitionend: null ontransitionrun: null ontransitionstart: null onvolumechange: null L’élément < Select > - 36 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV onwaiting: null onwebkitanimationend: null onwebkitanimationiteration: null onwebkitanimationstart: null onwebkittransitionend: null onwheel: function onwheel() options: HTMLOptionsCollection(3) [ option, option, option] outerHTML: "<select size=\"3\" id=\"isel\" name=\"nsel\" onclick=\"fsel(this,1)\" onchange=\"fsel(name,2)\" onselect=\"fsel(id,5)\" onmouseout=\"fsel(null)\" onkeyup=\"fsel(isel,3)\" onwheel=\"fsel(nsel,4)\">\n <option value=\"NYS\">Nystagmus</option>\n <option value=\"PRB\" selected=\"\">Presbytie</option>\n <option value=\"GLC\">Glaucome</option>\n </select>" ownerDocument: HTMLDocument file:///K:/DADET/PROGS/test.html parentElement: <form name="fName"> parentNode: <form name="fName"> previousSibling: #text " " selectedIndex: 0 selectedOptions: HTMLCollection [ option ] size: 3 tagName: "SELECT" textContent: "\n Nystagmus\n Presbytie\n Glaucome\n " type: "select-one" value: "NYS" <prototype>: HTMLSelectElementPrototype { item: item(), namedItem: namedItem(), add: add(), … } Avec Yandex Version 18.10.1.385 beta : L’élément < Select > - 37 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV 11:00:40.616 test.html:20 Dans document.forms['fName'].elements[0] 11:00:40.620 test.html:22 <select size="3" id="isel" name="nsel" onclick="fsel(this,1)" onchange="fsel(name,2)" onselect="fsel(id,5)" onmouseout="fsel(null)" onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)"> … </select> IV. Avec la « id » ou le « name » de l’élément SELECT : <form name="fName"> <select size=3 id="isel" name="nsel" onClick="fsel(this,1)" onChange="fsel(name,2)" onSelect="fsel(id,5)" onMouseOut="fsel(null)" onKeyUp="fsel(isel,3)" onWheel="fsel(nsel,4)"> <option value="NYS">Nystagmus</option> <option value="PRB" selected>Presbytie</option> <option value="GLC">Glaucome</option> </select> </form> <script type="text/javascript"> "use strict"; const fsel = (p,q) => { let s,r; if(q==3 || q==4){ console.log("Dans fsel(isel et nsel)"); r=document.forms['fName'].isel console.log(r); s=document.forms['fName'].nsel console.log(s); s=document.getElementsByName('fName') console.log(s); s=document.getElementsByName('fName')[0] console.log(s); s=document.getElementsByName('nsel') console.log(s); s=document.getElementById('isel') console.log(s); L’élément < Select > - 38 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV s=document.getElementsByName('fName')[0][0] console.log(s); s=document.getElementsByName('fName')[0][0][0] console.log(s); s=document.getElementsByName('fName')[0][0][0][0] console.log(s); } } </script> Exécution : V. Avec fsel ( name ) : <form name="fName"> <select size=3 id="isel" name="nsel" onClick="fsel(this,1)" onChange="fsel(name,2)" onContextMenu="fsel(id,5)" onMouseOut="fsel(null)" L’élément < Select > - 39 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV onKeyUp="fsel(isel,3)" onWheel="fsel(nsel,4)"> <option value="NYS">Nystagmus</option> <option value="PRB" selected>Presbytie</option> <option value="GLC">Glaucome</option> </select> </form> <script type="text/javascript"> "use strict"; const fsel = (n,q) => { let s; if(q==2){ s=n console.log("Dans fsel(name)"); console.log(s); s=document.forms["fName"].elements[n]; console.log(s); s=document.getElementsByName(n)[0]; console.log("s.value =",s.value); console.log("s.attributes =",s.attributes); console.log("s.multple =",s.multple); console.log("s.innerHTML =",s.innerHTML); console.log("s.outerHTML =",s.outerHTML); console.log("s.textContent =",s.textContent); console.log("s.text =",s.text); // « text » n'est pas attribut de Select. console.log("".padEnd(50,"=")); } } </script> Exécution avec Yandex : 12:43:30.684 ================================================== 12:43:30.993 test.html:21 Dans fsel(name) 12:43:30.993 test.html:23 nsel 12:43:30.994 test.html:26 <select size="3" id="isel" name="nsel" L’élément < Select > - 40 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV onclick="fsel(this,1)" onchange="fsel(name,2)" oncontextmenu="fsel(id,5)" onmouseout="fsel(null)" onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)"> … </select> 12:43:30.995 test.html:30 s.value = PRB 12:43:30.995 test.html:32 s.attributes = NamedNodeMap { 0: size, 1: id, 2: name, 3: onclick, 4: onchange, 5: oncontextmenu, 6: onmouseout, 7: onkeyup, 8: onwheel, size: size, id: id, name: name, onclick: onclick, onchange: onchange, … } 12:43:30.996 test.html:34 s.multple = undefined 12:43:30.996 test.html:36 s.innerHTML = <option value="NYS">Nystagmus</option> <option value="PRB" selected="">Presbytie</option> <option value="GLC">Glaucome</option> 12:43:30.996 test.html:38 s.outerHTML = <select size="3" id="isel" name="nsel" onclick="fsel(this,1)" onchange="fsel(name,2)" oncontextmenu="fsel(id,5)" onmouseout="fsel(null)" onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)"> <option value="NYS">Nystagmus</option> <option value="PRB" selected="">Presbytie</option> <option value="GLC">Glaucome</option> </select> 12:43:30.997 test.html:40 s.textContent = Nystagmus Presbytie Glaucome 12:43:30.997 test.html:42 s.text = undefined 12:43:30.997 test.html:45 ================================================== Exécution avec Firefox : 12:53:45,454 ================================================== test.html:45:7 12:53:47,375 Dans fsel(name) test.html:21:7 12:53:47,376 nsel test.html:23:7 L’élément < Select > - 41 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV 12:53:47,376 <select id="isel" size="3" name="nsel" onclick="fsel(this,1)" onchange="fsel(name,2)" oncontextmenu="fsel(id,5)" onmouseout="fsel(null)" onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)"> test.html:26:7 12:53:47,377 test.html:30:7 s.value = PRB 12:53:47,377 s.attributes = NamedNodeMap(9) [ size="3", id="isel", name="nsel", onclick="fsel(this,1)", onchange="fsel(name,2)", oncontextmenu="fsel(id,5)", onmouseout="fsel(null)", onkeyup="fsel(isel,3)", onwheel="fsel(nsel,4)" ] test.html:32:7 12:53:47,380 s.multple = undefined test.html:34:7 12:53:47,380 s.innerHTML = <option value="NYS">Nystagmus</option> <option value="PRB" selected="">Presbytie</option> <option value="GLC">Glaucome</option> test.html:36:7 12:53:47,381 s.outerHTML = <select size="3" id="isel" name="nsel" onclick="fsel(this,1)" onchange="fsel(name,2)" oncontextmenu="fsel(id,5)" onmouseout="fsel(null)" onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)"> <option value="NYS">Nystagmus</option> <option value="PRB" selected="">Presbytie</option> <option value="GLC">Glaucome</option> </select> test.html:38:7 12:53:47,381 s.textContent = Nystagmus Presbytie Glaucome test.html:40:7 12:53:47,381 s.text = undefined test.html:42:7 12:53:47,382 ================================================== test.html:45:7 VI. Avec fsel ( id ) : <form name="fName"> L’élément < Select > - 42 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV <select size=3 id="isel" name="nsel" onClick="fsel(this,1)" onChange="fsel(name,2)" onContextMenu="fsel(id,5)" onMouseOut="fsel(null)" onKeyUp="fsel(isel,3)" onWheel="fsel(nsel,4)"> <option value="NYS">Nystagmus</option> <option value="PRB" selected>Presbytie</option> <option value="GLC">Glaucome</option> </select> </form> <script type="text/javascript"> "use strict"; const fsel = (i,q) => { let s; if(q==5){ s=i console.log("Dans fsel(id)"); console.log(s); s=document.getElementById(s); console.log("s.value =",s.value); console.log("s.attributes =",s.attributes); console.log("s.multple =",s.multple); console.log("s.innerHTML =",s.innerHTML); console.log("s.outerHTML =",s.outerHTML); console.log("s.textContent =",s.textContent); console.log("s.text =",s.text); // « text » n'est pas attribut de Select. console.log("".padEnd(50,"=")); } } </script> Exécution avec Firefox : 13:09:27,480 Dans fsel(id) test.html:21:7 13:09:27,482 isel test.html:23:7 13:09:27,482 s.value = PRB test.html:27:7 L’élément < Select > - 43 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV 13:09:27,483 s.attributes = NamedNodeMap(9) [ size="3", id="isel", name="nsel", onclick="fsel(this,1)", onchange="fsel(name,2)", oncontextmenu="fsel(id,5)", onmouseout="fsel(null)", onkeyup="fsel(isel,3)", onwheel="fsel(nsel,4)" ] test.html:29:7 13:09:27,490 s.multple = undefined test.html:31:7 13:09:27,491 s.innerHTML = <option value="NYS">Nystagmus</option> <option value="PRB" selected="">Presbytie</option> <option value="GLC">Glaucome</option> test.html:33:7 13:09:27,491 s.outerHTML = <select size="3" id="isel" name="nsel" onclick="fsel(this,1)" onchange="fsel(name,2)" oncontextmenu="fsel(id,5)" onmouseout="fsel(null)" onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)" > <option value="NYS">Nystagmus</option> <option value="PRB" selected="">Presbytie</option> <option value="GLC">Glaucome</option> </select> test.html:35:7 13:09:27,492 s.textContent = Nystagmus Presbytie Glaucome test.html:37:7 13:09:27,493 s.text = undefined test.html:39:7 13:09:27,493 ================================================== test.html:42:7 Exécution avec Yandex : 13:16:54.883 13:16:54.894 13:16:54.897 13:16:54.897 test.html:42 ================================================== test.html:21 Dans fsel(id) test.html:23 isel test.html:27 s.value = GLC 13:16:54.898 test.html:29 s.attributes = NamedNodeMap { 0: size, 1: id, 2: name, 3: onclick, 4: onchange, L’élément < Select > - 44 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV 5: oncontextmenu, 6: onmouseout, 7: onkeyup, 8: onwheel, size: size, id: id, name: name, onclick: onclick, onchange: onchange, … } 13:16:54.902 test.html:31 s.multple = undefined 13:16:54.903 test.html:33 s.innerHTML = <option value="NYS">Nystagmus</option> <option value="PRB" selected="">Presbytie</option> <option value="GLC">Glaucome</option> 13:16:54.903 test.html:35 s.outerHTML = <select size="3" id="isel" name="nsel" onclick="fsel(this,1)" onchange="fsel(name,2)" oncontextmenu="fsel(id,5)" onmouseout="fsel(null)" onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)" > <option value="NYS">Nystagmus</option> <option value="PRB" selected="">Presbytie</option> <option value="GLC">Glaucome</option> </select> 13:16:54.904 test.html:37 s.textContent = Nystagmus Presbytie Glaucome 13:16:54.904 test.html:39 s.text = undefined 13:16:54.904 test.html:42 ================================================== Voici un Double-Exemple simple gérant un élément SELECT : La première fonction, « dispSelectedItem ( this ) » reçoit en paramètre une copie de l’élément SELECT ONCLICK et le gère. La deuxième fonction, « dispSelectedItem_2 () » récupère elle-même l’élément SELECT Avec la méthode « getElementById ( «sId» ) » pour le gérer. Les deux donnent exactement le même résultat. Notez la syntaxe très simplifiée pour accéder à la valeur et au texte, par rapport aux syntaxes qu’on verra plus loin. L’élément < Select > - 45 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV <form name="myForm"> <select id="sname" onChange=dispSelectedItem(this)> <option value=CAT>Cataracte</option> <option value=CEC>Cécité</option> <option value=GLC>Glaucome</option> </select> </form> <script type="text/javascript"> "use strict"; let dispSelectedItem = s => { console.log("DANS « dispSelectedItem () »"); let selElIdxThis = s.selectedIndex, selValThis = s[selElIdxThis].value, selTextThis = s[s.selectedIndex].text; console.log("*** Avec SELECT passé via THIS :"); console.log("Select = ",s); console.log("selectedIndex =", selElIdxThis ); console.log("Value =", selValThis ); console.log("Text =",selTextThis); dispSelectedItem_2(); } </script> <script type="text/javascript"> "use strict"; let dispSelectedItem_2 =_=> { console.log("\nDANS « dispSelectedItem_2 () »"); console.log("*** Avec SELECT obtenu via GETELEMENTBYID :") let sEl=document.getElementById("sname"), selElIdx = sEl.selectedIndex, selVal = sEl[sEl.selectedIndex].value, selText = sEl[sEl.selectedIndex].text; console.log("Select = ",sEl); console.log("selectedIndex =", selElIdx); console.log("Value =", selVal); console.log("Text =", selText); } </script> Exécution : À partir de cette liste déroulante repliée, sélectionnez par exemple Glaucome : L’élément < Select > - 46 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Et voyez le listage dans la fenêtre de la console : test.html:13 test.html:18 test.html:19 Select = DANS « dispSelectedItem () » *** Avec SELECT passé via THIS : <select id="sname" onchange="dispSelectedItem(this)">…</select> <select id="sname" onchange="dispSelectedItem(this)"> <option value="CAT">Cataracte</option> <option value="CEC">Cécité</option> <option value="GLC">Glaucome</option> </select> test.html:20 test.html:21 test.html:22 selectedIndex = 2 Value = GLC Text = Glaucome test.html:32 test.html:33 DANS « dispSelectedItem_2 () » *** Avec SELECT obtenu via GETELEMENTBYID : test.html:39 Select = <select id="sname" onchange="dispSelectedItem(this)">…</select> <select id="sname" onchange="dispSelectedItem(this)"> <option value="CAT">Cataracte</option> <option value="CEC">Cécité</option> <option value="GLC">Glaucome</option> </select> test.html:20 selecte test.html:40 test.html:41 test.html:42 selectedIndex = 2 Value = GLC Text = Glaucome Vous pouvez vouloir par exemple que la sélection d’une option dans une liste déroulante sélectionne automatiquement une autre option dans une autre liste déroulante distincte en plus d’éventuellement entreprendre une action : 1ère méthode : L’élément < Select > - 47 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV <body> Sélection Section<br> <select id="section" onchange="fOnClick(this);" size="7"> <option value=null>Select a Continent</option> <option value="crane">Crane</option> <option value="oeil">Oeil</option> <option value="oreille">Oreille</option> <option value="tronc">Tronc</option> <option value="abdomen">Abdomen</option> </select> <br><br>Sélection organe<br> <select id="organe" class="cOrg" size="7"> <option value="0">ORGANE INITIAL</option> <option value="1">Pied</option> <option value="2">Cheveu</option> <option value="3">Ongle</option> <option value="4">Peau</option> </select> </body> <script type="text/javascript"> "use strict"; const listOrgans = new Array(4) listOrgans[null] = ["Sélection organe"]; listOrgans["crane"] = ["I = Olfactif", "II = Optique", " IV = Pathétique", "V = Trijumeau", "VII = Facial", "X = Pneumogastrique (=Vague)"]; listOrgans["oeil"] = ["Rétine", "Descemet", "Hyaloéde", "Bruch", "Gliales", "Amacrine"]; listOrgans["oreille"] = ["Vestibule", "étrier", "Tympan", "Cochléa"]; listOrgans["tronc"]= ["Médiastin", "Thymus", "Coeur", "Plévre"]; listOrgans["abdomen"]= ["Mésentére", "épiploon", "Péritoine"]; function fOnClick(sElm) { const idx = sElm.selectedIndex; const listOrgIdx = sElm.options[idx].value; const curList = listOrgans[listOrgIdx]; // listOrgans à sélectionner dans la collection élistOrgansé. const oS = document.querySelector(".cOrg"); // le <select> de éclass=cOrgé // N'oubliez pas le point dans .cOrg. // Effacer la liste des options en cours dans // le <select> cible (les supprimer toutes). oS.options.length = 0; // Maintenant y injecter les nouvelles options let nvlleOption; for (var i=0; i<curList.length; i++) { nvlleOption = document.createElement("option"); nvlleOption.value = curList[i]; // ou nvlleOption.textContent = curList[i]; nvlleOption.text = curList[i]; // Injecter la nouvelle option try { oS.add(nvlleOption); // IE } catch (e) { oS.appendChild(nvlleOption); // DOM L’élément < Select > - 48 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV } } } </script> 2ème Méthode (parmi beaucop d’autres) de gérer deux listes liées : <form name="myForm"> <select size=3 onChange=dispSelectedItem(this)> <option value=GM>Goma</option> <option value=LZ>Luozi</option> <option value=MD>Modu</option> </select> <select size=3 id="pv" onChange="dispSelectedItem_2()"> <option value="BC">Bas-Congo</option> <option value="ET">Est</option> </select> L’élément < Select > - 49 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV </form> <script type="text/javascript"> "use strict"; let dispSelectedItem = s => { let selElIdxThis = s.selectedIndex, selValThis = s[selElIdxThis].value, loc; let sPv=document.getElementById("pv"); if(selValThis=="LZ"){ sPv.selectedIndex=0; loc=s[selElIdxThis].text+" se trouve dans : "+ sPv[0].value+" ("+sPv[0].text+")"; } else if(selValThis=="GM"){ sPv.selectedIndex=1; loc=s[selElIdxThis].text+" se trouve dans : "+ sPv[1].value+" ("+sPv[1].text+")"; } else if(selValThis=="MD"){ sPv.selectedIndex=-1; loc=s[selElIdxThis].text+" se trouve dans : "+ "Inconnu"; } console.log(loc); } </script> <script type="text/javascript"> "use strict"; let dispSelectedItem_2 = _ => { let s=document.getElementById("pv"), selElIdxThis = s.selectedIndex, selValThis = s[selElIdxThis].value, loc; if(selValThis=="BC"){ s.selectedIndex=0; loc=s[selElIdxThis].value+" ("+s[selElIdxThis].text+")"; } else if(selValThis=="ET"){ s.selectedIndex=1; loc=s[selElIdxThis].value+" ("+s[selElIdxThis].text+")"; } console.log(loc); } </script> Exécution : Cliques sur « Luozi » dans la première liste, et voyez ce qui se passe. Une option est automatiquement sélectionnée dans la deuxième liste, et des messages s’affichent. -> L’élément < Select > - 50 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu 23:51:57.532 test.html:38 JavaScript Tome- XXIV Luozi se trouve dans : BC (Bas-Congo) Cliquez maintenant sur « Goma »: -> 23:55:02.486 test.html:38 Goma se trouve dans : ET (Est) Cliquez maintenant sur « Modu »: -> 23:58:59.922 test.html:38 Modu se trouve dans : Inconnu Remarquez aussi que TOUTES les options de la deuxième liste déroulante (celle de droite) sont automatiquement désélectionnées. Cliquez maintenant sur « Est » dans cette liste déroulante de droite : -> 00:03:40.122 test.html:60 ET (Est) Et enfin, cliquez sur « Bas-Congo » dans cette liste déroulante de droite : -> 00:07:43.048 test.html:60 BC (Bas-Congo) L’addEventListener « onClick » peut aussi servir à détecter toute intrusion dans l’élément. L’élément < Select > - 51 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Parcours des options avec la boucle « for…in » : ne fonctionne pas bien. <select id="selId" onclick="fsel();"> <option value= "http://diasmath.blogg.org"> diasmath </option> <option value= "http://www.amessi.org/diasoluka" selected="Selected"> diasoluka </option> <option value= "https://www.youtube.com/watch?v=UUlPUdTALWQ"> Video </option> </select> <script type="text/javascript"> "use strict"; const sel=document.getElementById('selId'); const fsel = _ => { console.log("BEWARE, SOMEONE HAS DARED TRESPASSING"); console.log("THIS « SELECT » ELEMENT BY CLICKING."); for(let k in sel.options) { console.log(sel.options[k].value) } }; </script> Exécution : 6 options non déclarées en trop. Préférez donc l’une des formes qui suivent : A. Parcours des options avec la boucle « for…to » : fonctionne mieux. <select id="selId" onclick="fsel();"> <option value= "http://diasmath.blogg.org"> diasmath </option> <option value= L’élément < Select > - 52 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV "http://www.amessi.org/diasoluka" selected="Selected"> diasoluka </option> <option value= "https://www.youtube.com/watch?v=UUlPUdTALWQ"> Video </option> </select> <script type="text/javascript"> "use strict"; const sel=document.getElementById('selId'); console.log( "sel.length =", sel.length, ", ", "sel.options.length =", sel.options.length ); // sel.length = 3 sel.options.length = 3 const fsel = _ => { console.log("BEWARE, SOMEONE HAS DARED TRESPASSING"); console.log("THIS « SELECT » ELEMENT BY CLICKING."); for(let k=0,l=sel.length ; k<l ; k++) { console.log(sel.options[k].value) } }; </script> B. Parcours des options avec la boucle « for…of » : fonctionne aussi mieux. Vous avez aussi un petit bonus : l’affichage de l’option sélectionnée. <select id="selId" onmouseup="fsel();"> <option value= "http://diasmath.blogg.org"> diasmath </option> <option value= "http://www.amessi.org/diasoluka" selected="Selected"> diasoluka </option> <option value= "https://www.youtube.com/watch?v=UUlPUdTALWQ"> Video L’élément < Select > - 53 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV </option> </select> <script type="text/javascript"> "use strict"; var sel=document.getElementById('selId'); const fsel = _ => { var isl; console.log("BEWARE, SOMEONE HAS DARED TRESPASSING"); console.log("THIS « SELECT » ELEMENT BY CLICKING."); for(let k of sel.options) { console.log(" * ",k.value); if ( sel.options[sel.selectedIndex].selected === true ) { isl = sel.options[sel.selectedIndex]; } } console.log( "L'option sélectionnée =", isl.text,"=>", isl.value, "\n","=".repeat(15),"\n"); } </script> L’élément < Select > - 54 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV La liste complète des EventHandlers : voyez les « onMachinTruc » plus loin (page 7). L’EventHandler bénéficie de toute la compliance de JavaScript. Commençons par cet exemple simple : <form name="fname"> <select id="sname" onchange="dispSelectedItem()"> <optgroup>Auteur <option style="background:#979196;color:#CDDCB6" value="nada"> Avec « value » </option> <option value="Kuzayinsi">kzn</option> <option value="Benakio" selected="Selected">bnk</option> <option value="Ndozi">ndz</option> </optgroup> <optgroup>Volume <option style="background:#979196;color:#CDDCB6" value="nada"> Sans « value » </option> <option>2003</option> <option>2010</option> <option>2018</option> </optgroup> <optgroup>URLs <option style="background:#979196;color:#CDDCB6" value="nada"> URLs </option> <option value="http://diasmath.blogg.org">diasmath</option> <option value= "http://gha.centerblog.net/4-GHA-Nouvelle-Arme-pour-TUER-LA-MORT"> GHA-Nouvelle-Arme-pour-TUER-LA-MORT </option> <option value="https://www.youtube.com/watch?v=UUlPUdTALWQ"> Video </option> </optgroup> </select> </form> <textarea id="txtarea" style="height:150;width:350"></textarea> <script type="text/javascript"> "use strict"; let dispSelectedItem = _ => { let selEl = document.getElementById("sname"); let selVal = selEl.value, L’élément < Select > - 55 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV selText = selEl.options[selEl.selectedIndex].text; if(selVal!="nada") { document.getElementById("txtarea").innerHTML += selText +" : "+ selVal + "\n\n" if(selVal.startsWith("http")) window.open(selVal); } } let dispSelectedItem2 = _ => { let selEl2 = document.getElementById("sname"); let selVal2 = selEl2.options[selEl2.selectedIndex].value, selText2 = selEl2.text; if(selVal2!="nada") { console.log(selText2 , selVal2) } } onload = dispSelectedItem2; // Dès le chargement : // dispSelectedItem() doit déjà être définie. </script> On peut aussi directement accéder aux options d’un élément « select » via l’alias « this », au lieu de la longue formule « document.getElementById("sname") . options[document.getElementById("sname").selectedIndex].value » surtout dans sa forme complète! <script type="text/javascript"> "use strict"; let getval = sel => { window.open(sel.value); } </script> <select onchange="getval(this);"> <option value= "http://diasmath.blogg.org"> diasmath </option> <option value= "http://gha.centerblog.net/4-GHA-Nouvelle-Arme-pour-TUER-LA-MORT"> L’élément < Select > - 56 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV GHA-Nouvelle-Arme-pour-TUER-LA-MORT </option> <option value= "https://www.youtube.com/watch?v=UUlPUdTALWQ"> Video </option> </select> Au lieu de pointer une fonction externe à exécuter (exécuter une fonction externe), l’Event (ici « onchange ») peut directement exécuter la fonction localement : <select onchange="(function(p){console.log(p.value)})(this);"> <option value= "http://diasmath.blogg.org"> diasmath </option> <option value= "http://www.amessi.org/diasoluka"> diasoluka </option> <option value= "https://www.youtube.com/watch?v=UUlPUdTALWQ"> Video </option> </select> Exécution : 19:01:26,976 http://www.amessi.org/diasoluka test.html:1:14 19:01:28,293 https://www.youtube.com/watch?v=UUlPUdTALWQ test.html:1:14 19:01:29,484 http://diasmath.blogg.org test.html:1:14 Au lieu d’une fonction, l’Event peut exécuter n’importe quelle instruction valide et isolée : <select onchange="console.log(this.value);"> <option value= "http://diasmath.blogg.org"> diasmath </option> <option value= "http://gha.centerblog.net/4-GHA-Nouvelle-Arme-pour-TUER-LA-MORT"> GHA-Nouvelle-Arme-pour-TUER-LA-MORT </option> L’élément < Select > - 57 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV <option value= "https://www.youtube.com/watch?v=UUlPUdTALWQ"> Video </option> </select> Exécution : 18:54:41,162 http://gha.centerblog.net/4-GHA-Nouvelle-Arme-pour-TUER-LA-MORT test.html:1:1 18:54:44,704 http://diasmath.blogg.org test.html:1:1 18:54:46,502 https://www.youtube.com/watch?v=UUlPUdTALWQ test.html:1:1 Si on ne spécifie pas la valeur de l’attribut « value » la valeur retournée sera automatiquement celle de l’étiquette d’affichage. Exécution : à gauche la liste déroulante, à droite l’affichage. L’élément < Select > - 58 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV On peut plus facilement manipuler la « value » de l’élément « select » avec « event » : <script type="text/javascript"> const d = document.querySelector("idt"); function selectAction(event) { idt.innerHTML+=`value = ${event.target.value}\n`; } </script> OnChange<br> <label>Votre choix :<br></label> <select size="6" onchange="selectAction(event);" id="sel"> <option value="nom">DIASOLUKA</option> <option value="prenom">Luyalu</option> <!-- 1er MéTHODE D'AJOUT DE NVLLE OPTION --> <script> document.write( `<option value = "annee" selected="selected"> ${new Date().toLocaleString()}</option>` ); </script> </select> <br><textarea id="idt" style="width:233;height:100" placeholder=`Cliquez_ici_pour_afficher_l'event.`> </textarea> <br><button id="ida" style="width:233">AJOUT D'OPTION & l'Event</button> <script> let cptr=0; document.getElementById('ida').addEventListener('click', function(e) { const s = document.getElementById("sel"); // 2é MéTHODE D'AJOUT DE NVLLE OPTION s.options[s.options.length] = new Option('New Text' + ++cptr, 'new_value' + cptr); // Fin ajout de nvlle OPTION }); document.getElementById('idt').addEventListener('click', function(e) { const s = document.getElementById("sel"); console.log("Current Select Options =",s.options); L’élément < Select > - 59 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV console.log("e =",e); console.log("e.target =",e.target); console.log("e.srcElement =",e.srcElement); console.log("e.button =",e.button); console.log("e.buttons =",e.buttons); console.log("e.clientX =",e.clientX); console.log("e.clientY =",e.clientY); console.log("e.composed =",e.composed); console.log("e.ctrlKey =",e.ctrlKey); console.log("e.currentTarget =",e.currentTarget); console.log("e.originalTarget =",e.originalTarget); console.log("e.defaultPrevented =",e.defaultPrevented); console.log("e.preventDefault =",e.preventDefault); console.log("e.detail =",e.detail); console.log("e.eventPhase =",e.eventPhase); console.log("e.explicitOriginalTarget =",e.explicitOriginalTarget); console.log("e.isTrusted =",e.isTrusted); console.log("e.layerX =",e.layerX); console.log("e.layerY =",e.layerY); console.log("e.metaKey =",e.metaKey); console.log("e.movementX =",e.movementX); console.log("e.movementY =",e.movementY); console.log("e.mozInputSource =",e.mozInputSource); console.log("e.mozPressure =",e.mozPressure); console.log("e.offsetX =",e.offsetX); console.log("e.offsetY =",e.offsetY); console.log("e.originalTarget =",e.originalTarget); console.log("e.pageX =",e.pageX); console.log("e.pageY =",e.pageY); console.log("e.rangeOffset =",e.rangeOffset); console.log("e.rangeParent =",e.rangeParent); console.log("e.region =",e.region); console.log("e.relatedTarget =",e.relatedTarget); console.log("e.returnValue =",e.returnValue); console.log("e.screenX =",e.screenX); console.log("e.screenY =",e.screenY); console.log("e.shiftKey =",e.shiftKey); console.log("e.srcElement =",e.srcElement); console.log("e.timeStamp =",e.timeStamp); console.log("e.type =",e.type); console.log("e.view =",e.view); console.log("e.which =",e.which); console.log("e.x =",e.x); } ); </script> L’élément < Select > - 60 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Parcourons les différentes options. D’abord cliquons sur « luyalu », puis ajoutons une nouvelle option en cliquant sur le bouton « AJOUT D’OPTIONS & l’Event », puis cliquons sur la nouvelle option, puis cliquons sur « DIASOLUKA », puis ajoutons encore une option, puis cliquons sur cette nouvelle option, puis cliquons sur la date (option qui a été ajoutée via le DOM), puis ajoutons encore une option et cliquons cette nouvelle option. Et au final nous avons ceci ci-après : Vous voyez que nous pouvons continuer à ajouter autant de nouvelles options et exploitables, que nous voulons. Cliquons maintenant la fenêtre des affichages pour lister dans la console les attributs de l’event avec leurs valeurs en cours. Current Select Options = HTMLOptionsCollection(6) [ option, option, option, option, option, option] test.html:42:7 e = click { target: textarea#idt, buttons: 0, clientX: 120, clientY: 217, layerX: 111, layerY: 71 } test.html:44:7 e.target = <textarea id="idt" style="width:233;height:100" placeholder="`Cliquez_ici_pour_afficher_l'event.`"> test.html:45:7 e.srcElement = <textarea id="idt" style="width:233;height:100" placeholder="`Cliquez_ici_pour_afficher_l'event.`"> test.html:46:7 e.button = 0 e.buttons = 0 e.clientX = 120 e.clientY = 217 e.composed = true L’élément < Select > test.html:47:7 test.html:48:7 test.html:49:7 test.html:50:7 test.html:51:7 - 61 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu e.ctrlKey = false JavaScript Tome- XXIV test.html:52:7 e.currentTarget = <textarea id="idt" style="width:233;height:100" placeholder="`Cliquez_ici_pour_afficher_l'event.`"> test.html:53:7 e.originalTarget = <div class="anonymous-div inherit-scroll-behavior"> test.html:54:7 e.defaultPrevented = false test.html:55:7 e.preventDefault = function preventDefault() test.html:56:7 e.detail = 1 test.html:57:7 e.eventPhase = 2 test.html:58:7 e.explicitOriginalTarget = <textarea id="idt" style="width:233;height:100" placeholder="`Cliquez_ici_pour_afficher_l'event.`"> test.html:59:7 e.isTrusted = true e.layerX = 111 e.layerY = 71 e.metaKey = false e.movementX = 0 e.movementY = 0 e.mozInputSource = 1 e.mozPressure = 0 e.offsetX = 111 e.offsetY = 71 test.html:60:7 test.html:61:7 test.html:62:7 test.html:63:7 test.html:64:7 test.html:65:7 test.html:66:7 test.html:67:7 test.html:68:7 test.html:69:7 e.originalTarget = <div class="anonymous-div inherit-scroll-behavior"> test.html:70:7 e.pageX = 120 e.pageY = 217 e.rangeOffset = 78 e.rangeParent = null e.region = e.relatedTarget = null e.returnValue = undefined e.screenX = 1197 e.screenY = 412 e.shiftKey = false test.html:71:7 test.html:72:7 test.html:73:7 test.html:74:7 test.html:75:7 test.html:76:7 test.html:77:7 test.html:78:7 test.html:79:7 test.html:80:7 e.srcElement = <textarea id="idt" style="width:233;height:100" placeholder="`Cliquez_ici_pour_afficher_l'event.`"> test.html:81:7 e.timeStamp = 1082377 e.type = click test.html:82:7 test.html:83:7 e.view = Window file:///K:/DADET/PROGS/test.html test.html:84:7 L’élément < Select > - 62 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu e.which = 1 e.x = 120 JavaScript Tome- XXIV test.html:85:7 test.html:86:7 La propriété « selectedIndex » de l’élément « select » fixe une valeur ou retourne la valeur de l’index de l’option sélectionnée, partant de 0 (zéro). La valeur d’index -1 désélectionne toutes les options, ou alternativement indique qu’aucune option n’est sélectionnée. <label>VOTRE CHOIX :<br></label> <select size="5" id="sel" onClick="fSelectedIndex(1);" onKeyUp="fSelectedIndex(4);"> <option <option <option <option value="nom">Diasoluka</option> value="postnom">Luyalu</option> value="planete" selected="selected">Terre</option> value="etoile" onclick='fSelectedIndex(-1);'>Soleil</option> <script> document.write( `<option value='annee'>${new Date().toLocaleString()}</option>` ); </script> </select> <script type="text/javascript"> "use strict"; function fSelectedIndex(p=1) { const e = document.getElementById("sel"); if(p==1){ let i = e.options[e.selectedIndex]; console.log("L'index de l'option sélectionnée est ", e.selectedIndex); if(e.selectedIndex!=-1){ console.log("Label = ", i.text, ', value = ', i.value); } } else if(p==4){ e.selectedIndex=p; let i = e.options[e.selectedIndex]; console.log("L'index actuel d'option sélectionnée = ", e.selectedIndex); console.log("Label = ", i.text, ', value = ', i.value); } else if(p==-1){ e.selectedIndex=p; let i = e.options[e.selectedIndex]; console.log("L'index actuel d'option sélectionnée = ", e.selectedIndex); } console.log("<RET> pour sélectionner la dernière option"); console.log("<CLICK Etoile> pour tout DÉsélectionner\n\n"); L’élément < Select > - 63 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV } </script> Exécution : Notez d’abord que l’option sélectionnée par défaut est « Planète ». On a par la suite cliqué sur « Postnom », puis on a frappé sur « RETOUR », puis finalement on a cliqué sur « Etoile ». 23:32:53,976 23:32:53,978 23:32:53,979 23:32:53,979 L'index de l'option sélectionnée est 1 Label = Postnom , value = Luyalu <RET> pour sélectionner la dernière option <CLICK Etoile> pour tout DÉsélectionner test.html:26:7 test.html:28:10 test.html:45:5 test.html:46:5 23:32:58,737 23:32:58,738 23:32:58,739 23:32:58,740 L'index actuel d'option sélectionnée = 4 Label = Cette année , value = 12/11/2018 <RET> pour sélectionner la dernière option <CLICK Etoile> pour tout DÉsélectionner test.html:35:7 test.html:36:7 test.html:45:5 test.html:46:5 23:33:03,608 L'index actuel d'option sélectionnée = -1 23:33:03,609 <RET> pour sélectionner la dernière option 23:33:03,609 <CLICK Etoile> pour tout DÉsélectionner test.html:42:7 test.html:45:5 test.html:46:5 23:33:03,610 L'index de l'option sélectionnée est -1 23:33:03,611 <RET> pour sélectionner la dernière option 23:33:03,611 <CLICK Etoile> pour tout DÉsélectionner test.html:26:7 test.html:45:5 test.html:46:5 Pour sélectionner une option, on peut utiliser au moins l’une des deux syntaxes comprimées ci-dessous : « e.selectedIndex = p-1 » ou « e.options[p-1].selected = true » e étant « e = document.getElementById("selelect_ID") » Toutefois, les deux ne réagissent pas exactement de la même façon quand l’indice (index) proposé est hors limite (inférieur à zéro ou supérieur à « select.length - 1 »). L’élément < Select > - 64 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV <label>VOTRE CHOIX :<br></label> <select size="5" id="sel"> <option <option <option <option value="nom">Diasoluka</option> value="postnom">Luyalu</option> value="planete" selected="selected">Terre</option> value="etoile" onclick='fSelectedIndex(-1);'>Soleil</option> <script> document.write( "<option value='annee'>"+new Date().toLocaleString()+"</option>" ); </script> </select> <br><br>Avec e.selectedIndex = p-1;<br> <input id="idi" onChange="fSelectedIndex(value , 1)"> <br><br>Avec e.options[p-1].selected = true;<br> <input id="idi" onChange="fSelectedIndex(value , 2)"> <script type="text/javascript"> "use strict"; function fSelectedIndex(p, q) { const e = document.getElementById("sel"); if(q==1) { console.log( " AVEC « E.SELECTEDINDEX=P-1 » " .padStart(45,"*").padEnd(50,"*") ); console.log("".padEnd(50,"=")); e.selectedIndex=p-1; } else if(q==2) { console.log( " AVEC « E.OPTIONS[P-1].SELECTED = TRUE » " .padStart(45,"*").padEnd(50,"*") ); console.log("".padEnd(50,"=")); e.options[p-1].selected = true; } let i = e.options[e.selectedIndex]; console.log( "Le VRAI [0->] index actuel d'option sélectionnée = ", e.selectedIndex ); console.log("Label = *", i.text.toUpperCase(), '*, value = ', i.value); console.log("<RET> pour sélectionner la dernière option"); console.log("<CLICK Etoile> pour tout DÉsélectionner\n\n"); L’élément < Select > - 65 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV } </script> Exécution : *************** AVEC « E.SELECTEDINDEX=P-1 » ***** test.html:29:9 ================================================== test.html:33:9 Le VRAI [0->] index actuel d'option sélectionnée = 1 test.html:47:5 Label = * POSTNOM *, value = Luyalu test.html:48:5 <RET> pour sélectionner la dernière option test.html:50:5 <CLICK Etoile> pour tout DÉsélectionner test.html:51:5 L’élément < Select > - 66 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV **** AVEC « E.OPTIONS[P-1].SELECTED = TRUE » ***** test.html:38:9 ================================================== test.html:42:9 Le VRAI [0->] index actuel d'option sélectionnée = 4 test.html:47:5 Label = * CETTE ANNÉE *, value = 13/11/2018 test.html:48:5 <RET> pour sélectionner la dernière option test.html:50:5 <CLICK Etoile> pour tout DÉsélectionner test.html:51:5 *************** AVEC « E.SELECTEDINDEX=P-1 » ***** test.html:29:9 ================================================== test.html:33:9 Le VRAI [0->] index actuel d'option sélectionnée = 0 test.html:47:5 Label = * NOM *, value = Diasoluka test.html:48:5 <RET> pour sélectionner la dernière option test.html:50:5 <CLICK Etoile> pour tout DÉsélectionner test.html:51:5 L’élément < Select > - 67 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV *************** AVEC « E.SELECTEDINDEX=P-1 » ***** test.html:29:9 ================================================== test.html:33:9 Le VRAI [0->] index actuel d'option sélectionnée = -1 test.html:47:5 TypeError: i is undefined[En savoir plus] test.html:48:5 fSelectedIndex file:///K:/DADET/PROGS/test.html:48:5 onchange file:///K:/DADET/PROGS/test.html:1:1 **** AVEC « E.OPTIONS[P-1].SELECTED = TRUE » ***** test.html:38:9 ================================================== test.html:42:9 TypeError: e.options[(p - 1)] is undefined[En savoir plus] test.html:43:9 fSelectedIndex file:///K:/DADET/PROGS/test.html:43:9 onchange file:///K:/DADET/PROGS/test.html:1:1 L’élément < Select > - 68 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV *************** AVEC « E.SELECTEDINDEX=P-1 » ***** test.html:29:9 ================================================== test.html:33:9 Le VRAI [0->] index actuel d'option sélectionnée = -1 test.html:47:5 TypeError: i is undefined[En savoir plus] test.html:48:5 fSelectedIndex file:///K:/DADET/PROGS/test.html:48:5 onchange file:///K:/DADET/PROGS/test.html:1:1 **** AVEC « E.OPTIONS[P-1].SELECTED = TRUE » ***** test.html:38:9 ================================================== test.html:42:9 TypeError: e.options[(p - 1)] is undefined[En savoir plus] test.html:43:9 fSelectedIndex file:///K:/DADET/PROGS/test.html:43:9 onchange file:///K:/DADET/PROGS/test.html:1:1 L’élément < Select > - 69 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV *************** AVEC « E.SELECTEDINDEX=P-1 » ***** test.html:29:9 ================================================== test.html:33:9 Le VRAI [0->] index actuel d'option sélectionnée = -1 test.html:47:5 TypeError: i is undefined[En savoir plus] test.html:48:5 fSelectedIndex file:///K:/DADET/PROGS/test.html:48:5 onchange file:///K:/DADET/PROGS/test.html:1:1 **** AVEC « E.OPTIONS[P-1].SELECTED = TRUE » ***** test.html:38:9 ================================================== test.html:42:9 TypeError: e.options[(p - 1)] is undefined[En savoir plus] test.html:43:9 fSelectedIndex file:///K:/DADET/PROGS/test.html:43:9 onchange file:///K:/DADET/PROGS/test.html:1:1 Si « select » n’est pas défini pour une multisélection (avec l’attribut « muti »), et qu’on y sélectionne quand-même plusieurs options, « selectedIndex » retournera l’index de la dernière option sélectionnée rencontrée qui deviendra la seule option sélectionnée, et la « value » de l’élément « select » sera naturellement aussi celle de la dernière option sélectionnée. Voyons ça. L’élément < Select > - 70 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV <select class=cSel size=10> <option value="AUR">Aura</option> <option value="AMB">Amblyopie</option> <option value="AMR" selected=true>Amaurose</option> <option value="CCT">Cécité Corticale</option> <option value="SCC">Scotome Central</option> <option value="SCS" selected="selected">Scotome Scintillant</option> <option value="SCP">Scotome Positif</option> <option value="SCN">Scotome Négatif</option> <option value="PST" selected>Post-Image</option> <option value="MCT">Migraines Cataméniales</option> </select> <script type="text/javascript"> "use strict"; const s = document.querySelector(".cSel"); console.log(s.value), console.log( s.selectedIndex," *", s[s.selectedIndex].value," *", s[s.selectedIndex].textContent, ), console.log(s.selectedOptions) </script> Si « select » est défini pour une multisélection (avec l’attribut « muti »), « selectedIndex » retournera l’index de la première option sélectionnée rencontrée et toutes les autres sélections persisteront. Voyons comment gérer une multiple sélection d’options. <label>VOTRE CHOIX :<br></label> <select multiple size="5" class="cSel"> <option <option <option <option value="nom" selected="selected">Diasoluka</option> value="postnom">Luyalu</option> value="planete" selected="selected">Terre</option> value="etoile">Soleil</option> <script> document.write( `<option value="Annee" selected='selected'>${new Date().toLocaleString()}</option>` ); </script> </select> L’élément < Select > - 71 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV <br> <textarea onclick="fSelectedIndex();" id="tid" style="height:200;width:270"> </textarea> <script type="text/javascript"> "use strict"; function fSelectedIndex() { const e = document.querySelector(".cSel"); const z = document.getElementById("tid"); for(let k=0 , l=e.length ; k<l ; k++){ if(e.options[k].selected) { z.innerHTML+= `${e.options[k].value} = ${e.options[k].text}\n` } } z.innerHTML+="\n" } </script> Exécution : Ce qui suit est valable seulement à titre d’illustration, seulement pour le code ci-dessus. Faites un « click [gauche] » sur la « textarea » pour afficher. Ajoutez la sélection de par exemple « Postnom » avec « CTRL-RETOUR », puis sélectionnez seulement « ETOILE » en cliquant dessus. L’élément < Select > - 72 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Une surcharge du code ci-dessus : On change dynamiquement le « label » ainsi que les « value » et « text » de « select », et on ajoute deux nouvelles « options » avec deux méthodes différentes. <label id="lid">VOTRE CHOIX :<br> Click pour sélectionner<br> Click-Droit sur Soleil = Tout Désélectionner<br></label> <select multiple size="9" id="sel" onClick="fSelectedIndex()"> <option value="nom" selected>Diasoluka</option> <option value="postnom">Luyalu</option> <option value="planete" selected=true>Terre</option> <option value="etoile" onContextMenu='fSelectedIndex(-1);'> Soleil=Unselect All </option> <!—1ère MÉTHODE D'AJOUT D'OPTION --> <script> document.write( `<option value = "annee" selected="selected"> ${new Date().toLocaleString()}</option>` ); </script> </select> <button id="idb">CHANGE</button> <br><button id="ida" style="width:233">AJOUT D'OPTION & l'Event</button> <br><textarea id="tid" style="height:320"></textarea> <script type="text/javascript"> "use strict"; function fSelectedIndex(p) { const e = document.getElementById("sel"); const z = document.getElementById("tid"); L’élément < Select > - 73 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV if(p==-1) e.selectedIndex=p; else { for(let k=0 , l=e.length ; k<l ; k++){ if(e.options[k].selected) { z.innerHTML+= `${e.options[k].value} = ${e.options[k].text}`; } } z.innerHTML+="\n\n" } } </script> <script type="text/javascript"> "use strict"; function fChange() { const e = document.getElementById("sel"); const z = document.getElementById("tid"); const l = document.getElementById("lid"); l.innerHTML='MALADIES DES YEUX<br>' const a=[ ["DR","CAT","MD","HR","XR"], ['D?collement R?tine','CATARACTE', 'Myod?sopsie','H?m?ralopie','X?rophtalmie'] ]; for(let k=0 , l=e.length ; k<l ; k++){ e.options[k].text = a[0][k]; e.options[k].value= a[1][k]; } } let cptr=0; document.getElementById('ida').addEventListener('click', function(e){ const s = document.getElementById("sel"); // 2? m?thode d'ajout de nvlle OPTION s.options[s.options.length] = new Option('New Text'+ ++cptr, 'new_value'+cptr); // Fin ajout de nvlle OPTION console.log("Current Select Options =",s.options); console.log("e =",e); console.log("e.target =",e.target); console.log("e.button =",e.button); console.log("e.buttons =",e.buttons); console.log("e.clientX =",e.clientX); console.log("e.clientY =",e.clientY); console.log("e.ctrlKey =",e.ctrlKey); console.log("e.defaultPrevented =",e.defaultPrevented); console.log("e.preventDefault =",e.preventDefault); console.log("e.layerX =",e.layerX); console.log("e.layerY =",e.layerY); console.log("e.movementX =",e.movementX); console.log("e.movementY =",e.movementY); console.log("e.offsetX =",e.offsetX); console.log("e.offsetY =",e.offsetY); console.log("e.pageX =",e.pageX); console.log("e.pageY =",e.pageY); console.log("e.rangeParent =",e.rangeParent); console.log("e.screenX =",e.screenX); L’élément < Select > - 74 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV console.log("e.screenY =",e.screenY); console.log("e.shiftKey =",e.shiftKey); console.log("e.type =",e.type); console.log("e.view =",e.view); console.log("e.which =",e.which); console.log("e.x =",e.x); } ); document.getElementById('idb').addEventListener('click', fChange); </script> Exempled’exécution : Vous pouvez à tout moment ajouter d’option en cliquant sur le bouton « AJOUT D'OPTION & l'Event ». Mais travaillons avec les options préexistantes. Cliquez droit dans la liste [déroulante] de sélection puis annuler avec « ESCAPE », puis cilquez sur Etoile pour tout désélectionner (observez bien ce qui se passe). À ce niveau on clique le « button CHANGE » : Puis cliquez sur l’option « CAT » et frappez sur « RETOUR ». Puis multisélectionnez avec « CLICK-GAUCHE » tout en gardant la touche « CTRL » enfoncée. Remarquez ce qui se passe en lachant la touche « CTRL » qui effectue alors un « OnKeyUp ». Puis multisélectionnez encore l’option « MD » avec « CTRL-CLICK ». Puis désélectionnez le tout en cliquant sur « HR » qui a remplacé « ETOILE ». L’élément < Select > - 75 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV À ce niveau, ajoutons une nouvelle option en tapant sur ce bouton. La nouvelle option s’est ajoutée et la liste actualisée de l’event s’est affichée dans la fenêtre de la console. <CTRL-Cliquons> sur cette nouvelle option, puis cliquons sur HT. L’élément < Select > - 76 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Ajout à un élément « select » d’options à partir d’un objet. <select class="cSel"></select> <div class="cDiv"></div> <button class="iBut">AJOUTER L'OPTION SUIVANTE</button> <script type="text/javascript"> "use strict"; var o = { "RET" : 'Rétinoblastome', "SSC" : 'Scinchisis Scintillans', "TRM" : 'Trou Maculaire', "MYD" : 'Myodésopsie' }; console.dir(o); var s = document.querySelector(".cSel"); var d = document.querySelector(".cDiv"); var b = document.querySelector(".iBut"); let i=0, addflag=0; let kv = Object.entries(o); let faddopt = _ => { if(kv[i]!=undefined) { if (!addflag) { console.log(kv[i][0], kv[i][1]); s.options[s.options.length] = L’élément < Select > - 77 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV new Option(kv[i][0], kv[i++][1]); s.size = s.options.length; s.selectedIndex = s.options.length - 1; } } else { if(!addflag){ addflag=1; b.innerHTML = "DÉTRUIRE TOUTES LES OPTIONS"; console.log("=".repeat(35)); } else { /////////// Supprimer toutes les options en cours /**/ while (s.options.length > 0) { /**/ s.remove(0); /**/ } // ou s.options.length = null; // ou s.options.length = undefined; // ou s.options.length = NaN; // ou s.options.length = ""; // ou s.options.length = 0; /////////// Fin Suppression toutes les options en cours b.innerHTML = "AJOUTER DE NOUVEAU L'OPTION SUIVANTE"; addflag=0, i=0; } } } let fdisp = _ => { d.innerHTML+=s[s.selectedIndex].value + s[s.selectedIndex].text+"<br>"; } b.addEventListener("click",faddopt,false); s.addEventListener("click",fdisp,false); </script> Cliquez sur le bouton « AJOUTER L’OPTION SUIVANTE » 4 fois : Cliquez encore sur ce même bouton : L’élément < Select > - 78 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Cliquez de nouveau ce bouton : La liste s’efface, et on repart de zéro. L’élément < Select > - 79 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Jongler avec les « value » et « text » des « options » d’un élément « select » : Avec « Object . entries » et « Object . values » : <select id="iSel" size="3"> <option value="one">Un</option> <option value="two">Deux</option> <option value="three">Trois</option> </select> <script type="text/javascript"> "use strict"; const i=document.getElementById("iSel"); for(let k=0;k<i.length;k++) { if(k == i.selectedIndex) console.log("Selected ".repeat(3)); console.log(`${Object.entries(i.options)[k][1].value}`+ ` => ` + `${Object.entries(i.options)[k][1].innerHTML}`); console.log(Object.values(i.options)[k].value , " => ", Object.values(i.options)[k].innerHTML); console.log("=".repeat(25)); } </script> Et Encore : <select class="cS" onChange="fSel2(this.value);"> <option value="0">Sélectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <select id="iS1" onChange = "fSel(options[this.selectedIndex].value);"> <option value="0">Sélectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select><br> <select id="iS2" onChange = L’élément < Select > - 80 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV "fSel3(options[this.selectedIndex].text);"> <option value="0">Sélectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <select id="iS3" onChange = "fSel3(options[this.selectedIndex].textContent);"> <option value="0">Sélectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <select id="iS4" onChange = "fSel3(options[this.selectedIndex].label);"> <option value="0">Sélectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <select id="iS4" onChange = "fSel3(options[this.selectedIndex].innerHTML);"> <option value="0">Sélectionner</option> <option value="1">Un</option> <option value="2" selected>Deux</option> <option value="3">Trois</option> </select> <script type="text/javascript"> "use strict"; const s=document.querySelector(".cS"); // options[this.selectedIndex].value let fSel = (sIdx) => console.log(sIdx, s.options[sIdx].text, s.options[sIdx].textContent, s.options[sIdx].label); let fSel2= (sIdx) => { // this.value console.log( sIdx, s.options[sIdx].text, s.options[sIdx].textContent, s.options[sIdx].label , o[sIdx].innerHTML); } // options[this.selectedIndex].text // options[this.selectedIndex].textContent // options[this.selectedIndex].label // options[this.selectedIndex].innerHTML let fSel3= (sIdx) => { console.log(sIdx); } </script> <!-- fSel --> <script type="text/javascript"> "use strict"; const x=document.querySelector(".cS"), o=x.options, i=x.selectedIndex; console.log(o[i].value, o[i].text , o[i].textContent , o[i].label , o[i].innerHTML); </script> <!-- .cS" --> L’élément < Select > - 81 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Au chargement : Changeons les sélections : LAPAROTOMISONS L’ÉLÉMENT « HTMLSelectElement » à la console de Firefox : Pour exploiter au mieux et à fond cet élément HTML/DOM comme tout autre objet, il convient de connaître toutes ses propriétés, listables par exemple à la console par exemple de Firefox Quantum 64.0b13 ou de Yandex Version 18.10.1.385 beta. Voici ainsi quelques propriétés et méthodes disponibles pour l’élément Select ou HTMLSelectElement, la plupart d’entre elles sont aussi valables pour d’autres objets : Développement de function() ci-dessus (dans le navigateur Yandex Version 18.11.0.2022 beta) : Object.getOwnPropertyDescriptors(HTMLSelectElement) 1. {length: {…}, name: {…}, arguments: {…}, caller: {…}, prototype: {…}} 1. 2. 3. 4. 5. arguments: {value: null, writable: false, enumerable: false, configurable: false} caller: {value: null, writable: false, enumerable: false, configurable: false} length: {value: 0, writable: false, enumerable: false, configurable: true} name: {value: "HTMLSelectElement", writable: false, enumerable: false, configurable: true} prototype: {value: HTMLSelectElement, writable: false, enumerable: false, configurable: false} 6. __proto__: Object L’élément < Select > - 82 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Prototype de HTMLSelectElement avec Firefox : « options », « selectedIndex » et « value » sont les attributs (propriétés) les plus utilisés. prototype: HTMLSelectElementPrototype add: function add() autocomplete: Getter & Setter autofocus: Getter & Setter checkValidity: function checkValidity() constructor: function () disabled: Getter & Setter form: Getter item: function item() labels: Getter length: Getter & Setter multiple: Getter & Setter name: Getter & Setter namedItem: function namedItem() options: Getter remove: function remove() reportValidity: function reportValidity() required: Getter & Setter selectedIndex: Getter & Setter selectedOptions: Getter setCustomValidity: function setCustomValidity() size: Getter & Setter type: Getter validationMessage: Getter validity: Getter value: Getter & Setter willValidate: Getter Symbol(Symbol.iterator): function values() <prototype>: HTMLElementPrototype { click: click(), focus: focus(), blur: blur(), … } Prototype du constructeur de HTMLSelectElement avec Firefox : « options », « selectedIndex » et « value » sont les attributs (propriétés) les plus utilisés. constructor: () length: 0 name: "HTMLSelectElement" prototype: HTMLSelectElementPrototype add: function add() autocomplete: Getter & Setter autofocus: Getter & Setter checkValidity: function checkValidity() constructor: function () disabled: Getter & Setter form: Getter item: function item() labels: Getter length: Getter & Setter L’élément < Select > - 83 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV multiple: Getter & Setter name: Getter & Setter namedItem: function namedItem() options: Getter remove: function remove() reportValidity: function reportValidity() required: Getter & Setter selectedIndex: Getter & Setter selectedOptions: Getter setCustomValidity: function setCustomValidity() size: Getter & Setter type: Getter validationMessage: Getter validity: Getter value: Getter & Setter willValidate: Getter Symbol(Symbol.iterator): function values() <prototype>: HTMLElementPrototype { click: click(), focus: focus(), blur: blur(), … } Symbol(Symbol.hasInstance): function Symbol.hasInstance() <prototype>: function () Prototype du prototype du constructeur de HTMLSelectElement avec Firefox : <prototype>: HTMLElementPrototype accessKey: Getter & Setter accessKeyLabel: Getter blur: function blur() click: function click() constructor: function () contentEditable: Getter & Setter contextMenu: Getter dataset: Getter dir: Getter & Setter draggable: Getter & Setter focus: function focus() hidden: Getter & Setter innerText: Getter & Setter isContentEditable: Getter lang: Getter & Setter offsetHeight: Getter offsetLeft: Getter offsetParent: Getter offsetTop: Getter offsetWidth: Getter onabort: Getter & Setter onanimationcancel: Getter & Setter onanimationend: Getter & Setter onanimationiteration: Getter & Setter onanimationstart: Getter & Setter onauxclick: Getter & Setter onblur: Getter & Setter L’élément < Select > - 84 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV oncanplay: Getter & Setter oncanplaythrough: Getter & Setter onchange: Getter & Setter onclick: Getter & Setter onclose: Getter & Setter oncontextmenu: Getter & Setter oncopy: Getter & Setter oncut: Getter & Setter ondblclick: Getter & Setter ondrag: Getter & Setter ondragend: Getter & Setter ondragenter: Getter & Setter ondragexit: Getter & Setter ondragleave: Getter & Setter ondragover: Getter & Setter ondragstart: Getter & Setter ondrop: Getter & Setter ondurationchange: Getter & Setter onemptied: Getter & Setter onended: Getter & Setter onerror: Getter & Setter onfocus: Getter & Setter ongotpointercapture: Getter & Setter oninput: Getter & Setter oninvalid: Getter & Setter onkeydown: Getter & Setter onkeypress: Getter & Setter onkeyup: Getter & Setter onload: Getter & Setter onloadeddata: Getter & Setter onloadedmetadata: Getter & Setter onloadend: Getter & Setter onloadstart: Getter & Setter onlostpointercapture: Getter & Setter onmousedown: Getter & Setter onmouseenter: Getter & Setter onmouseleave: Getter & Setter onmousemove: Getter & Setter onmouseout: Getter & Setter onmouseover: Getter & Setter onmouseup: Getter & Setter onmozfullscreenchange: Getter & Setter onmozfullscreenerror: Getter & Setter onpaste: Getter & Setter onpause: Getter & Setter onplay: Getter & Setter onplaying: Getter & Setter onpointercancel: Getter & Setter onpointerdown: Getter & Setter onpointerenter: Getter & Setter onpointerleave: Getter & Setter onpointermove: Getter & Setter onpointerout: Getter & Setter onpointerover: Getter & Setter onpointerup: Getter & Setter L’élément < Select > - 85 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV onprogress: Getter & Setter onratechange: Getter & Setter onreset: Getter & Setter onresize: Getter & Setter onscroll: Getter & Setter onseeked: Getter & Setter onseeking: Getter & Setter onselect: Getter & Setter onselectstart: Getter & Setter onshow: Getter & Setter onstalled: Getter & Setter onsubmit: Getter & Setter onsuspend: Getter & Setter ontimeupdate: Getter & Setter ontoggle: Getter & Setter ontransitioncancel: Getter & Setter ontransitionend: Getter & Setter ontransitionrun: Getter & Setter ontransitionstart: Getter & Setter onvolumechange: Getter & Setter onwaiting: Getter & Setter onwebkitanimationend: Getter & Setter onwebkitanimationiteration: Getter & Setter onwebkitanimationstart: Getter & Setter onwebkittransitionend: Getter & Setter onwheel: Getter & Setter spellcheck: Getter & Setter style: Getter & Setter tabIndex: Getter & Setter title: Getter & Setter <prototype>: ElementPrototype { getAttributeNames: getAttributeNames(), getAttribute: getAttribute(), getAttributeNS: getAttributeNS(), … <prototype>: ElementPrototype after: function after() animate: function animate() append: function append() attributes: Getter before: function before() childElementCount: Getter children: Getter classList: Getter & Setter className: Getter & Setter clientHeight: Getter clientLeft: Getter clientTop: Getter clientWidth: Getter closest: function closest() constructor: function () firstElementChild: Getter getAttribute: function getAttribute() getAttributeNS: function getAttributeNS() L’élément < Select > - 86 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV getAttributeNames: function getAttributeNames() getAttributeNode: function getAttributeNode() getAttributeNodeNS: function getAttributeNodeNS() getBoundingClientRect: function getBoundingClientRect() getClientRects: function getClientRects() getElementsByClassName: function getElementsByClassName() getElementsByTagName: function getElementsByTagName() getElementsByTagNameNS: function getElementsByTagNameNS() hasAttribute: function hasAttribute() hasAttributeNS: function hasAttributeNS() hasAttributes: function hasAttributes() hasPointerCapture: function hasPointerCapture() id: Getter & Setter innerHTML: Getter & Setter insertAdjacentElement: function insertAdjacentElement() insertAdjacentHTML: function insertAdjacentHTML() insertAdjacentText: function insertAdjacentText() lastElementChild: Getter localName: Getter matches: function matches() mozMatchesSelector: function mozMatchesSelector() mozRequestFullScreen: function mozRequestFullScreen() namespaceURI: Getter nextElementSibling: Getter outerHTML: Getter & Setter prefix: Getter prepend: function prepend() previousElementSibling: Getter querySelector: function querySelector() querySelectorAll: function querySelectorAll() releaseCapture: function releaseCapture() releasePointerCapture: function releasePointerCapture() remove: function remove() removeAttribute: function removeAttribute() removeAttributeNS: function removeAttributeNS() removeAttributeNode: function removeAttributeNode() replaceWith: function replaceWith() requestPointerLock: function requestPointerLock() scroll: function scroll() scrollBy: function scrollBy() scrollHeight: Getter scrollIntoView: function scrollIntoView() scrollLeft: Getter & Setter scrollLeftMax: Getter scrollTo: function scrollTo() scrollTop: Getter & Setter scrollTopMax: Getter scrollWidth: Getter setAttribute: function setAttribute() setAttributeNS: function setAttributeNS() setAttributeNode: function setAttributeNode() setAttributeNodeNS: function setAttributeNodeNS() setCapture: function setCapture() setPointerCapture: function setPointerCapture() tagName: Getter L’élément < Select > - 87 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV webkitMatchesSelector: function webkitMatchesSelector() Symbol(Symbol.unscopables): Object { slot: true, before: true, after: true, … Symbol(Symbol.unscopables): {…} after: true append: true before: true prepend: true remove: true replaceWith: true slot: true } <prototype>: NodePrototype { getRootNode: getRootNode(), hasChildNodes: hasChildNodes(), insertBefore: insertBefore(), … <prototype>: NodePrototype ATTRIBUTE_NODE: 2 CDATA_SECTION_NODE: 4 COMMENT_NODE: 8 DOCUMENT_FRAGMENT_NODE: 11 DOCUMENT_NODE: 9 DOCUMENT_POSITION_CONTAINED_BY: 16 DOCUMENT_POSITION_CONTAINS: 8 DOCUMENT_POSITION_DISCONNECTED: 1 DOCUMENT_POSITION_FOLLOWING: 4 DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32 DOCUMENT_POSITION_PRECEDING: 2 DOCUMENT_TYPE_NODE: 10 ELEMENT_NODE: 1 ENTITY_NODE: 6 ENTITY_REFERENCE_NODE: 5 NOTATION_NODE: 12 PROCESSING_INSTRUCTION_NODE: 7 TEXT_NODE: 3 appendChild: function appendChild() baseURI: Getter childNodes: Getter cloneNode: function cloneNode() compareDocumentPosition: function compareDocumentPosition() constructor: function () contains: function contains() firstChild: Getter getRootNode: function getRootNode() hasChildNodes: function hasChildNodes() insertBefore: function insertBefore() isConnected: Getter isDefaultNamespace: function isDefaultNamespace() isEqualNode: function isEqualNode() isSameNode: function isSameNode() lastChild: Getter lookupNamespaceURI: function lookupNamespaceURI() lookupPrefix: function lookupPrefix() nextSibling: Getter nodeName: Getter nodeType: Getter L’élément < Select > - 88 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV nodeValue: Getter & Setter normalize: function normalize() ownerDocument: Getter parentElement: Getter parentNode: Getter previousSibling: Getter removeChild: function removeChild() replaceChild: function replaceChild() textContent: Getter & Setter <prototype>: EventTargetPrototype { addEventListener: addEventListener(), removeEventListener: removeEventListener(), dispatchEvent: dispatchEvent(), … } } } Symboles de HTMLSelectElement : Symbol(Symbol.hasInstance): Symbol.hasInstance() length: 1 name: "[Symbol.hasInstance]" <prototype>: function () <prototype>: () apply: function apply() arguments: null bind: function bind() call: function call() caller: null constructor: function Function() constructor: Function() length: 1 name: "Function" prototype: function () prototype: () apply: function apply() arguments: null bind: function bind() call: function call() caller: null constructor: function Function() length: 0 name: "" toSource: function toSource() toString: function toString() Symbol(Symbol.hasInstance): function Symbol.hasInstance() <prototype>: Object { … } <prototype>: function () <prototype>: () apply: function apply() arguments: null bind: function bind() call: function call() L’élément < Select > - 89 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV caller: null constructor: function Function() length: 0 name: "" toSource: function toSource() toString: function toString() Symbol(Symbol.hasInstance): function Symbol.hasInstance() <prototype>: Object { … } length: 0 name: "" length: 0 name: "" toSource: function toSource() toString: function toString() Symbol(Symbol.hasInstance): function Symbol.hasInstance() <prototype>: Object { … } Prototype du prototype de HTMLSelectElement : <prototype>: () length: 0 name: "HTMLElement" prototype: HTMLElementPrototype { click: click(), focus: focus(), blur: blur(), … } Symbol(Symbol.hasInstance): function Symbol.hasInstance() <prototype>: function () <prototype>: () ATTRIBUTE_NODE: 2 CDATA_SECTION_NODE: 4 COMMENT_NODE: 8 DOCUMENT_FRAGMENT_NODE: 11 DOCUMENT_NODE: 9 DOCUMENT_POSITION_CONTAINED_BY: 16 DOCUMENT_POSITION_CONTAINS: 8 DOCUMENT_POSITION_DISCONNECTED: 1 DOCUMENT_POSITION_FOLLOWING: 4 DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32 DOCUMENT_POSITION_PRECEDING: 2 DOCUMENT_TYPE_NODE: 10 ELEMENT_NODE: 1 ENTITY_NODE: 6 ENTITY_REFERENCE_NODE: 5 NOTATION_NODE: 12 PROCESSING_INSTRUCTION_NODE: 7 TEXT_NODE: 3 length: 0 name: "Node" prototype: NodePrototype { L’élément < Select > - 90 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV getRootNode: getRootNode(), hasChildNodes: hasChildNodes(), insertBefore: insertBefore(), … } Symbol(Symbol.hasInstance): function Symbol.hasInstance() <prototype>: function () L’élément < Select > - 91 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Kinshasa, le 26 mai 2019 (1:02 ). Mots-clés : select, option, selectedIndex, selectedOptions, querySelector, getElementById, getElementsByName, HTMLSelectElement, HTMLOptionElement, HTMLOptionsCollection, event, EventTarget, EventSource, Object.getOwnPropertyDescriptors, ECMASCRIPT, JAVASCRIPT, onClick, onChange, onMouseOut, onKeyUp, onWheel, onContextMenu, textContent, text, innerHTML, innerText, outerHTML DIASOLUKA Nz. Luyalu Docteur en Médecine, Chirurgie & Accouchements (1977), CNOM : 0866 - Spécialiste en ophtalmologie (1980) Études humanités : Scientifique - Mathématiques & Physique. Informaticien-amateur, Programmeur et WebMaster. Chercheur indépendant, autonome et autofinancé, bénévole, sans aucun conflit d’intérêt ou liens d'intérêts ou contrainte promotionnelle avec qui qu’il soit ou quelqu’organisme ou institution / organisation que ce soit, étatique, paraétatique ou privé, industriel ou commercial en relation avec le sujet présenté. +243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818 [email protected] Autre Lecture : https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-La-Creation D’autres publications pouvant aussi intéresser : • https://www.scribd.com/document/377036251/Le-Dosage-Des-Medicamentsen-Cac-Cas • https://www.scribd.com/document/377035454/Le-Hasard-Des-ThermometresNon-contact-a-Infrarouge • https://www.scribd.com/document/376222482/Petite-Introduction-AuxFonctions-JavaScript • https://www.scribd.com/document/376221919/La-Foi-en-Jesus-Christ-PourQuoi-Faire • https://www.scribd.com/document/375689778/Lacuite-visuelle-angulaire • https://www.scribd.com/document/375349851/La-variable-This L’élément < Select > - 92 / 93 - dimanche, 26. mai 2019 (1:02 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV • https://www.scribd.com/document/375024162/Fonctions-Imbriquees-en-JS • https://www.scribd.com/document/374789297/Format-Interne-Des-ObjetsJavaScript • https://www.scribd.com/document/374788758/Iterations-en-JavaScript • https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-LaCreation • https://www.scribd.com/document/374597969/Nouvelle-Formule-d-IMCindice-de-doduite-Selon-Dr-Diasoluka • https://www.scribd.com/document/373847209/Property-Descriptors • https://www.scribd.com/document/373833282/l-Objet-Global-Window • https://www.scribd.com/document/372665249/Javascript-Tome-II • https://www.scribd.com/document/355291488/motilite-oculaire-2 • https://www.scribd.com/document/355291239/motilite-oculaire-I • https://www.scribd.com/document/355290248/Script-d-Analyses-DesReflexes-Pupillomoteurs • https://www.scribd.com/document/321168468/Renseignements-Id-etAnthropometriques • https://www.scribd.com/document/320856721/Emission-31-Jul-2016 • https://www.scribd.com/document/318182982/Complication-Visuelle-duTraitement-de-La-Malaria • https://www.scribd.com/document/318180637/Rapport-Entre-Oxymetrie-EtType-Respiration • https://www.scribd.com/document/315746265/Classification-DesMedicaments • https://www.scribd.com/document/315745909/Incongruences-Heresies-etHeterodoxies-de-la-Notion-de-Laboratoire • https://www.scribd.com/document/315745725/Rapport-Entre-Oxymetrie-EtType-Respiration L’élément < Select > - 93 / 93 - dimanche, 26. mai 2019 (1:02 )
