L'element SELECT en HTML-XHTML-DOM-JavaScript

L’ ÉLÉMENT <SELECT> EN JAVASCRIPT
Pour Débutant
JAVASCRIPT (Programmation Internet) VOL. XXIV
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 pos-
sède beaucoup de fonctionnalités et offre une quasi infinité de possibilités dont nous al-
lons parcourir ici quelques-unes.
Quand on ne maîtrise pas cet élément (SELECT) il paraît vraiment comme rébarbatif mais
comme on le verra ci-après, c’est un élément pourtant très facile et très intéressant à utili-
ser, rendant la programmation en JavaScript plus agréable que jouer au puzzle ou au
scrabble.
De plus sans lui on ne peut ni avoir les listes déroulantes de choix, ni pouvoir les utiliser
sans passer par des procédures réservées aux génies.
L’élément « select » doit avoir un attribut ou propriété name (nom) et/ou 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 con-
trô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 JavaScript Tome- XXIV
L’élément < Select > - 2 / 93 - dimanche, 26. mai 2019 (1:02 )
<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"),
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);

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV
L’élément < Select > - 3 / 93 - dimanche, 26. mai 2019 (1:02 )
// 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>

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV
L’élément < Select > - 4 / 93 - dimanche, 26. mai 2019 (1:02 )
<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>
<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>

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV
L’élément < Select > - 5 / 93 - dimanche, 26. mai 2019 (1:02 )
<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élec-
tionnées ;
<select id="iSel" class="cSel" multiple size=5>
<option value="eb">EBALE</option>
<option value="sn">SANI</option>