L'Élément Select, Très Important en JavaScript

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
diasfb@mail2world.com
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
<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

for(let i=0 , l=so.length ; i<l ; i++) // Mieux que for...in

console.log(so[i])
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 - lundi, 11. mars 2019 (8:41 )
// 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>
<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>

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>

<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>

<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 « la-
bel ou texte » identique « EBALE ») sont repris deux fois, la première fois non sélec-
tionnée, la deuxième fois sélectionnée. Cela a été respecté dans l’affichage avec Yan-
dex & QupZilla ci-dessous à gauche avec sélection en gris, et Firefox avec sélection en
bleu.
Si on rafraîchit la page, tout est sta-

tus quo avec yandex et QupZilla ;
tandis qu’avec Firefox quand on ra-
fraîchit la page, la première occur-
rence de l’option avec « va-
lue="eb" » et label = « EBALE »
devient aussi sélectionnée.
2. Si l’attribut « multiple » n’est pas spécifié => c’est la dernière option rencontrée dans
la liste à sélection multiple qui est automatiquement sélectionnée [avec les trois navi-
gateurs].
<select id="iSel" class="cSel" size=5>

</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="ep">EPASOLA</option>
</select>

L’accès à un élément HTML/DOM peut se faire de plusieurs manières, soit avec un « do-
cument . getElementById ( ) » ou un peu plus délicatement (en respectant le point de-
vant le om de classe) avec un « document . querySelector ( ) », soit très péniblement
avec un « document . getElementsByName ( ) ».
La méthode « document . querySelector ( ) » utilisée avec l’attribut « class = » a exac-

tement 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>
</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>

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');

Issu de document.querySelector('.cSel');
Listage de TOUTES les options (les sélectionnées et non), via la méthode « getEle-
mentsByName », en indiquant celles qui sont sélectionnées :
<select name="nSel" size=5 multiple>

<option value="ep" selected="selected">EPASOLA</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.

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>
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)">
Choix
</option>
</select>
</form>

let fgo = p => {

var selVal = p.sname.options[
p.sname.selectedIndex
].value;
var selText = p.sname.options[
p.sname.selectedIndex
].text;
else{
}
}
</script>
<form name="fname">
<select name="sname" onchange="fgo(fname)">
Choix
</option>
</select>
</form>
let fgo = p => {

let el=p.sname;
var selVal = el.options[
el.selectedIndex
].value;
var selText = el.options[
el.selectedIndex
].text;
else{
}
}
</script>
<form name="fname">
<select name="sname" onchange="fgo(this)">
Choix
</option>
</select>
</form>
let fgo = p => {

const el=p;
var selVal = el.options[
el.selectedIndex
].value;
var selText = el.options[
el.selectedIndex
].text;
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>
</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>
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: "+
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 :

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>
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 : "+
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;
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 :

Avec Firefox :
Avec Yandex :

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="53" selected=selected>Classe3</option>
</select>
</form>

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`);
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.selectedIndex].value =`,
[document.nForm.nlist.options.selectedIndex].value+`\n\n`);
console.log(
[document.nForm.nlist.options.selectedIndex].text =`,
[document.nForm.nlist.options.selectedIndex].text+`\n\n`);
console.log(
[document.nForm.nlist.options.selectedIndex].textContent =`,
[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').selectedIndex].value =`,
[document.querySelector('.clist').selectedIndex].value+`\n\n`);
console.log(
[document.querySelector('.clist').selectedIndex].text =`,
[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 :

.!. ATTENTION .!.
I. Quand vous avez un élément « select » avec par exemple un ID « id=list »,

l’instruction suivante :
document.getElementById("list").value="NIMPORTEQUOI";
sélectionne donc l’option qui a la value « NIMPORTEQUOI ». Si aucune option n’a la va-
lue == NIMPORTEQUOI, toutes les options seront désélectionnées.
document.getElementById("list").value=97;
<form name="nForm">
<select name="list" id="list" onmouseover="f()">

</select>
</form>

let f = _ => {
console.log(
document.getElementById("list"),
document.getElementsByName("list"),
)
}
</script>
Avec donc
Exécution :
->
Avec
Exécution :
->

II. Quand vous avez un élément select par exemple de nom « name=nsel », les ins-
tructions 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()">
</select>
</form>

let f = _ => {
console.log(
document.getElementById("list"),
document.getElementsByName("list"),
)
}
</script>

Avec
->
Avec
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>

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

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
15:17:11,108 i.options.selectedIndex = 1 test.html:15:2

15:17:11,109 i.options.length = 3 test.html:16:2
15:17:11,110 i.options.iNY = <option id="iNY" value="NYS"> test.html:17:2
15:17:11,111 i.options[iNY] = undefined test.html:19:2
15:17:15,994 i.options.iNY.selected=true = true test.html:23:2
15:17:15,995 i.options.label = undefined test.html:26:2
15:17:15,995 i.options.item = function item() test.html:29:2
15:17:15,997 i.options.item(0) = <option value="GLC"> test.html:30:2
Une option peut être manipulée directement et individuellement :
<form name="fName">
<se-
lect size=3 id="isel" name="nsel" onWheel="fWheel()" onContextMenu="fsel(isel)"
>
<label for="iNY"></label>
<option value="GLC" id="iGL">Glaucome</option>


</select>
</form>

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 :

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 douce-
ment le « Wheel » de la souris.
De nouveau on a une notification :

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. 0: option#nID
2. 1: option
3. 2: option#iNY
4. length: 3
5. selectedIndex: 0
6. iNY: option#iNY
7. nID: option#nID
8. __proto__: HTMLOptionsCollection
22:58:13.959 test.html:15 i.options.selectedIndex = 1

22:58:13.960 test.html:16 i.options.length = 3
22:58:13.960 test.html:17
i.options.iNY =
22:58:13.961 test.html:19 i.options[iNY] = undefined

22:58:15.021 test.html:23 i.options.iNY.selected=true = true
22:58:15.022 test.html:26 i.options.label = undefined
22:58:15.022 test.html:29 i.options.item = ƒ item() { [native code] }
22:58:15.023 test.html:30
i.options.item(0) =
<option value="GLC" id="iGL">Glaucome</option>
22:58:17.324 test.html:37 Dans fWheel()

22:58:18.733 test.html:48 s.selected = true , s.value nVAL , s.text = nTXT
Avec Firefox :
-> ->
->
->

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 i.options.selectedIndex = 1 test.html:15:2

23:24:19,365 i.options.length = 3 test.html:16:2
23:24:19,365 i.options.iNY = <option id="iNY" value="NYS"> test.html:17:2

23:24:19,366 i.options[iNY] = undefined test.html:19:2
23:24:20,252 i.options.iNY.selected=true = true test.html:23:2
23:24:20,252 i.options.label = undefined test.html:26:2
23:24:20,253 i.options.item = function item() 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 Dans fWheel() test.html:37:2

23:26:37,738 s.selected = true , s.value nVAL , s.text = nTXT
test.html:48:2

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>
</select>

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 op-
tions.
Avec Firefox Quantum 64.0b13 :
09:09:14,308 Dans fsel(null) test.html:14:5

09:09:14,309 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 test.html:14 Dans fsel(null)

09:09:04.826 test.html:18 NodeList []
length: 0
__proto__: NodeList
II. Version avec « this »
<select size=3 id="isel">

</select>

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 op-
tions.
Avec Firefox Quantum 64.0b13 et Yandex Version 18.10.1.385 beta :
III. Version avec « document . forms [ ' fName ' ] . elements [ 0 ] » :
<form name="fName">
onChange="fsel(name,2)"
onSelect="fsel(id,5)"
onKeyUp="fsel(isel,3)"
onWheel="fsel(nsel,4)">
</select>
</form>

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 "
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
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
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 :
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">
onSelect="fsel(id,5)"
</select>
</form>

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);
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">
onContextMenu="fsel(id,5)"
</select>
</form>

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"
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="PRB" selected="">Presbytie</option>
12:43:30.996 test.html:38
s.outerHTML =
</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
12:53:47,376
<select id="isel" size="3" name="nsel"
onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)"> test.html:26:7
12:53:47,377 s.value = PRB test.html:30:7
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="GLC">Glaucome</option> test.html:36:7
12:53:47,381
s.outerHTML =
</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">
onContextMenu="fsel(id,5)"
</select>
</form>

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.
}
}
</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
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="GLC">Glaucome</option> test.html:33:7
13:09:27,491
s.outerHTML =
onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)"
>
</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 test.html:42 ==================================================

13:16:54.894 test.html:21 Dans fsel(id)
13:16:54.897 test.html:23 isel
13:16:54.897 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,
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 =

13:16:54.903 test.html:35
s.outerHTML =
onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)"
>
</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 syn-
taxes qu’on verra plus loin.

<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>

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>

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 :

Et voyez le listage dans la fenêtre de la console :
test.html:13 DANS « dispSelectedItem () »

test.html:18 *** Avec SELECT passé via THIS :
test.html:19
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>
</select>
test.html:20 selectedIndex = 2
test.html:21 Value = GLC
test.html:22 Text = Glaucome
test.html:32 DANS « dispSelectedItem_2 () »

test.html:33 *** 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>
</select>
test.html:20 selecte
test.html:40 selectedIndex = 2
test.html:41 Value = GLC
test.html:42 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 :

<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>

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];
nvlleOption.textContent = curList[i];
// ou nvlleOption.text = curList[i];
// Injecter la nouvelle option

try {
oS.add(nvlleOption); // IE
}
catch (e) {
oS.appendChild(nvlleOption); // DOM
}
}
}
</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>
</form>

let dispSelectedItem = s => {
let selElIdxThis = s.selectedIndex,
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;
sPv[1].value+" ("+sPv[1].text+")";
}
else if(selValThis=="MD"){
sPv.selectedIndex=-1;
"Inconnu";
}
console.log(loc);
}
</script>

let dispSelectedItem_2 = _ => {
let s=document.getElementById("pv"),
selElIdxThis = s.selectedIndex,
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.
->
23:51:57.532 test.html:38 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.
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>

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=
diasmath
</option>

<option value=
diasoluka
</option>
<option value=
Video
</option>
</select>

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 = _ => {

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=
diasmath
</option>
<option value=
diasoluka
</option>
<option value=
Video
</option>
</select>

var sel=document.getElementById('selId');
const fsel = _ => {
var isl;
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>

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
Sans « value »
</option>
<option>2003</option>
</optgroup>
<optgroup>URLs
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>

let dispSelectedItem = _ => {
let selEl = document.getElementById("sname");
let selVal = selEl.value,
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!

let getval = sel => {
window.open(sel.value);
}
</script>
<select onchange="getval(this);">
<option value=
diasmath
</option>
<option value=
</option>
<option value=
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=
diasmath
</option>
<option value=
"http://www.amessi.org/diasoluka">
diasoluka
</option>
<option value=
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=

diasmath
</option>
<option value=
</option>
<option value=
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 automati-

quement celle de l’étiquette d’affichage.
Exécution : à gauche la liste déroulante, à droite l’affichage.

On peut plus facilement manipuler la « value » de l’élément « select » avec « event » :
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>

<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) {
console.log("Current Select Options =",s.options);
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>
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 ajou-
tons encore une option, puis cliquons sur cette nou-
velle 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"

test.html:46:7
e.button = 0 test.html:47:7
e.buttons = 0 test.html:48:7
e.clientX = 120 test.html:49:7
e.clientY = 217 test.html:50:7
e.composed = true test.html:51:7
e.ctrlKey = false test.html:52:7
e.currentTarget = <textarea id="idt" style="width:233;height:100"

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"
test.html:59:7
e.isTrusted = true test.html:60:7

e.layerX = 111 test.html:61:7
e.layerY = 71 test.html:62:7
e.metaKey = false test.html:63:7
e.movementX = 0 test.html:64:7
e.movementY = 0 test.html:65:7
e.mozInputSource = 1 test.html:66:7
e.mozPressure = 0 test.html:67:7
e.offsetX = 111 test.html:68:7
e.offsetY = 71 test.html:69:7
e.originalTarget = <div class="anonymous-div inherit-scroll-behavior">

test.html:70:7
e.pageX = 120 test.html:71:7

e.pageY = 217 test.html:72:7
e.rangeOffset = 78 test.html:73:7
e.rangeParent = null test.html:74:7
e.region = test.html:75:7
e.relatedTarget = null test.html:76:7
e.returnValue = undefined test.html:77:7
e.screenX = 1197 test.html:78:7
e.screenY = 412 test.html:79:7
e.shiftKey = false test.html:80:7
e.srcElement = <textarea id="idt" style="width:233;height:100"

test.html:81:7

e.timeStamp = 1082377 test.html:82:7

e.type = click test.html:83:7
e.view = Window file:///K:/DADET/PROGS/test.html

test.html:84:7
e.which = 1 test.html:85:7
e.x = 120 test.html:86:7
La propriété « selectedIndex » de l’élément « select » fixe une valeur ou retourne la va-

leur 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 value="nom">Diasoluka</option>
<option value="postnom">Luyalu</option>
<option value="planete" selected="selected">Terre</option>
<option value="etoile" onclick='fSelectedIndex(-1);'>Soleil</option>
<script>
document.write(
`<option value='annee'>${new Date().toLocaleString()}</option>`
);
</script>
</select>

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;
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;
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");
}
</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 L'index de l'option sélectionnée est 1 test.html:26:7

23:32:53,978 Label = Postnom , value = Luyalu test.html:28:10
23:32:53,979 <RET> pour sélectionner la dernière option test.html:45:5
23:32:53,979 <CLICK Etoile> pour tout DÉsélectionner test.html:46:5
23:32:58,737 L'index actuel d'option sélectionnée = 4 test.html:35:7

23:32:58,738 Label = Cette année , value = 12/11/2018 test.html:36:7
23:33:03,608 L'index actuel d'option sélectionnée = -1 test.html:42:7

23:33:03,610 L'index de l'option sélectionnée est -1 test.html:26:7

Pour sélectionner une option, on peut utiliser au moins l’une des deux syntaxes compri-
mé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 »).

<select size="5" id="sel">
<option value="nom">Diasoluka</option>
<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)">

function fSelectedIndex(p, q) {
if(q==1) {
console.log(
" AVEC « E.SELECTEDINDEX=P-1 » "
.padStart(45,"*").padEnd(50,"*")
);
e.selectedIndex=p-1;
}
else if(q==2) {
console.log(
" AVEC « E.OPTIONS[P-1].SELECTED = TRUE » "
.padStart(45,"*").padEnd(50,"*")
);
e.options[p-1].selected = true;
}
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");
}
</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

**** AVEC « E.OPTIONS[P-1].SELECTED = TRUE » ***** test.html:38:9

================================================== test.html:42:9
Label = * CETTE ANNÉE *, value = 13/11/2018 test.html:48:5

================================================== test.html:33:9
Label = * NOM *, value = Diasoluka test.html:48:5


================================================== 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

================================================== test.html:42:9
TypeError: e.options[(p - 1)] is undefined[En savoir plus] test.html:43:9



================================================== test.html:33:9


================================================== test.html:42:9



================================================== test.html:33:9


================================================== test.html:42:9

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.

<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>

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 »), « selectedIn-
dex » 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.

<select multiple size="5" class="cSel">
<option value="nom" selected="selected">Diasoluka</option>

<option value="etoile">Soleil</option>
<script>
document.write(
`<option value="Annee"
selected='selected'>${new Date().toLocaleString()}</option>`
);
</script>
</select>

<br>
<textarea onclick="fSelectedIndex();" id="tid"
style="height:200;width:270">
</textarea>

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.

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="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>

function fSelectedIndex(p) {

if(p==-1) e.selectedIndex=p;
else {
if(e.options[k].selected) {
z.innerHTML+=
`${e.options[k].value} = ${e.options[k].text}`;
}
}
z.innerHTML+="\n\n"
}
}
</script>

function fChange() {
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']
];
e.options[k].text = a[0][k];
e.options[k].value= a[1][k];
}
}
let cptr=0;
document.getElementById('ida').addEventListener('click', function(e){
// 2? m?thode d'ajout de nvlle OPTION

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);
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 » en-

foncé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 ».

À 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.

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>

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]);
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 :

Cliquez de nouveau ce bouton : La liste s’efface, et on repart de zéro.

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>

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);">
</select><br>

"fSel3(options[this.selectedIndex].text);">
</select>

"fSel3(options[this.selectedIndex].textContent);">
</select>

"fSel3(options[this.selectedIndex].label);">
</select>

"fSel3(options[this.selectedIndex].innerHTML);">
</select>

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> 

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> 

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 con-
vient 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 HTML-
SelectElement, 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. arguments: {value: null, writable: false, enumerable: false, configurable: false}
2. caller: {value: null, writable: false, enumerable: false, configurable: false}
3. length: {value: 0, writable: false, enumerable: false, configurable: true}
4. name: {value: "HTMLSelectElement", writable: false, enumerable: false, configurable: true}
5. proto-
type: {value: HTMLSelectElement, writable: false, enumerable: false, configurable: false}
6. __proto__: Object

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()
disabled: Getter & Setter
form: Getter
item: function item()
labels: Getter
length: Getter & Setter

multiple: Getter & Setter

name: Getter & Setter
namedItem: function namedItem()
options: Getter
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 {
}
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()
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
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
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()
firstElementChild: Getter
getAttribute: function getAttribute()
getAttributeNS: function getAttributeNS()
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()
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
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()
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
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>: ()
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: ()
arguments: null
caller: null
length: 0
name: ""
toSource: function toSource()
toString: function toString()
Symbol(Symbol.hasInstance):
function Symbol.hasInstance()
<prototype>: Object { … }
<prototype>: ()
arguments: null
caller: null
length: 0
name: ""
Symbol(Symbol.hasInstance):
function Symbol.hasInstance()
length: 0
name: ""
length: 0
name: ""
Prototype du prototype de HTMLSelectElement :
<prototype>: ()
length: 0
name: "HTMLElement"
prototype: HTMLElementPrototype {
}
<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 {
getRootNode: getRootNode(), hasChildNodes: hasChildNodes(),

insertBefore: insertBefore(), …
}

Kinshasa, le 11 mars 2019 (8:41 ).
Mots-clés :
select, option, selectedIndex, selectedOptions, querySelection, getElementById, getElementsByName,

HTMLSelectElement, HTMLOptionElement, HTMLOptionsCollection, event, EventTarget, Even-
tSource, Object.getOwnPropertyDescriptors, ECMASCRIPT, JAVASCRIPT, onClickc , onChange ,
onMouseOut , onKeyUp , onWheel , onContextMenu, textContent, text, innerHTML, innerText, outer-
HTML,.
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
diasfb@mail2world.com
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-Medicaments-
en-Cac-Cas
• https://www.scribd.com/document/377035454/Le-Hasard-Des-Thermometres-
Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/Petite-Introduction-Aux-
Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-en-Jesus-Christ-Pour-
Quoi-Faire
• https://www.scribd.com/document/375689778/Lacuite-visuelle-angulaire
• https://www.scribd.com/document/375349851/La-variable-This
• https://www.scribd.com/document/375024162/Fonctions-Imbriquees-en-JS
• https://www.scribd.com/document/374789297/Format-Interne-Des-Objets-
JavaScript
• https://www.scribd.com/document/374788758/Iterations-en-JavaScript
• https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-La-
Creation
• https://www.scribd.com/document/374597969/Nouvelle-Formule-d-IMC-
indice-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-Des-
Reflexes-Pupillomoteurs
• https://www.scribd.com/document/321168468/Renseignements-Id-et-
Anthropometriques
• https://www.scribd.com/document/320856721/Emission-31-Jul-2016
• https://www.scribd.com/document/318182982/Complication-Visuelle-du-
Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/Rapport-Entre-Oxymetrie-Et-
Type-Respiration
• https://www.scribd.com/document/315746265/Classification-Des-
Medicaments
• https://www.scribd.com/document/315745909/Incongruences-Heresies-et-
Heterodoxies-de-la-Notion-de-Laboratoire
• https://www.scribd.com/document/315745725/Rapport-Entre-Oxymetrie-Et-
Type-Respiration

L&#39;Élément Select, Très Important en JavaScript

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

L&#39;Élément Select, Très Important en JavaScript

Transféré par

Droits d'auteur :

Formats disponibles

L’ ÉLÉMENT <SELECT> EN JAVASCRIPT

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga

L’EventHandler « onselect » n’agit pas, tandis que le

La « value » de l’élément « select » est celle de l’option sélectionnée. Au chargement,

La propriété « selectedOptions » de « HTMLSelectElementPrototype » liste toutes les

<select class=cSel size=10 multiple>

<option value="AMR" selected=true>Amaurose</option>

<script type="text/javascript"> "use strict";

for(let i in so) console.log(so[i])

for(let i of so) console.log(i) // Mieux que le for...in

for(let i=0 , l=so.length ; i<l ; i++) // Mieux que for...in

console.log("value de s.selectedIndex =",s[si]);

console.log("value de s.selectedIndex =",s[si].value);

console.log("text de s.selectedIndex =",s[si].text);

console.log("textContent de s.selectedIndex =",s[si].textContent);

console.log("innerHTML de s.selectedIndex =",s[si].innerHTML);

// innerHTML de s.selectedIndex = Amaurose

console.log("outerHTML de s.selectedIndex =",s[si].outerHTML);

console.log("innerText de s.selectedIndex =",s[si].innerText);

La boucle « for in » liste même des éléments internes « cachés ».

Voici l’essentiel de la gestion de « Select » :

Cet exemple vaut pour les sélections multiples.

<select size=7 class="sid" multiple>

<option value="Gl" selected="selected">Glaucome</option>

<script type="text/javascript"> "use strict";

for (let i=0, l=selOpts.length ; i<l ; i++) {

L’élément < Select > - 4 / 93 - lundi, 11. mars 2019 (8:41 )

<select size=3 onChange="fct(this,this.value);" id="sid">

<script type="text/javascript"> 'use strict';

<- Ceci, au chargement !

Mais quand plusieurs options sont sélectionnées, il y a deux possibiités :

<select id="iSel" class="cSel" multiple size=5>

L’élément < Select > - 5 / 93 - lundi, 11. mars 2019 (8:41 )

<option value="ep" selected>EPASOLA</option>

Si on rafraîchit la page, tout est sta-

<select id="iSel" class="cSel" size=5>

<select id="iSel" class="cSel" multiple size=5>

L’élément < Select > - 6 / 93 - lundi, 11. mars 2019 (8:41 )

La méthode « document . querySelector ( ) » utilisée avec l’attribut « class = » a exac-

Utilisons la version avec l’attribut « multiple » spécifié, et appuyons le bouton « SUBMIT »

<script> "use strict";

for(let i of ss) console.log(`${".".repeat(3)} ${ i.value }`);

for(let i of cs) console.log(`${".".repeat(9)} ${ i.value }`);

L’élément < Select > - 7 / 93 - lundi, 11. mars 2019 (8:41 )

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

L’élément < Select > - 8 / 93 - lundi, 11. mars 2019 (8:41 )

<select name="nSel" size=5 multiple>

<script> "use strict";

Avec Firefox : Trois options sélectionnées.

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

L’élément < Select > - 9 / 93 - lundi, 11. mars 2019 (8:41 )

Accès à l’élément « Select » et ses options, via DOM :

<script type="text/javascript"> "use strict";

let fgo = _ => {

L’élément < Select > - 10 / 93 - lundi, 11. mars 2019 (8:41 )

<script type="text/javascript"> "use strict";

let fgo = p => {

<script type="text/javascript"> "use strict";

let fgo = p => {

<script type="text/javascript"> "use strict";

let fgo = p => {

Voici un exemple avec « document.getElementsByName » :

const f_act = _ =>{

console.log("*".repeat(3)," document.getElementsByName('sName'): ",s);

L'Élément Select, Très Important en JavaScript

L'Élément Select, Très Important en JavaScript