Vous êtes sur la page 1sur 93

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


// => <option value="AMR" selected="true">
// => <option value="SCS" selected="selected">
// => <option value="PST" selected="">

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


console.log(so[i])
// => <option value="AMR" selected="true">
// => <option value="SCS" selected="selected">
// => <option value="PST" selected="">

console.dir("s.value =",sv);
// s.value = AMR

console.dir("s.selectedIndex =",si);
// s.selectedIndex = 2

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


// value de s.selectedIndex =
// <option value="AMR" selected="true">

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


// value de s.selectedIndex = AMR

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


// text de s.selectedIndex = Amaurose

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


// textContent de s.selectedIndex = Amaurose

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


L’élément < Select > - 2 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

// innerHTML de s.selectedIndex = Amaurose

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


// outerHTML de s.selectedIndex =
// <option value="AMR" selected="true">Amaurose</option>

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


// innerText de s.selectedIndex = Amaurose

console.dir("s.selectedOptions =",so);
// s.selectedOptions =
// HTMLCollection(3)
// 0: <option value="AMR" selected="true">
// 1: <option value="SCS" selected="selected">
// 2: <option value="PST" selected="">
// length: 3
// <prototype>: HTMLCollectionPrototype {
// item: item(), namedItem: namedItem(), length: Getter,
// … }
</script>

Exécution :

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

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

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

Cet exemple vaut pour les sélections multiples.

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


<option value="Lc">Leucome cornée</option>
<option value="Xe" selected>Xérophtalmie</option>
<option value="Ca">Cataracte</option>
L’élément < Select > - 3 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

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

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


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

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


<option value="Xe">Xérophtalmie</option>
<option value="Ca">Cataracte</option>
<option value="Gl" selected="selected">Glaucome</option>
<option value="Tr">Blunt Trauma</option>
<option value="Np" selected="selected">Neurapraxis</option>
<option value="Hc" selected="selected">Hemispherectomie</option>
</select>

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


const fct = (s,v) => {
console.log( "La value de l'option sélectionnée est =", v );
console.log( "s[s.selectedIndex].text =",
s[s.selectedIndex].text );
console.log( "s.selectedOptions[0].text =",
s.selectedOptions[0].text );
}
</script>

Exécution :

<- Ceci, au chargement !

Quand aucune option n’est sélectionnée, aucune d’entre elles ne sera automatiquement
sélectionnée.

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

1. Si l’attribut « multiple » est spécifié => toutes les options sélectionnées seront sélec-
tionnées ;

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


<option value="eb">EBALE</option>
<option value="sn">SANI</option>

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


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

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


<option value="nz">NZETE</option>
<option value="eb" selected>EBALE</option>
</select>

Notez dans le code source ci-dessus que l’ « option » avec la « value » (et son « 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>


<option value="eb">EBALE</option>
<option value="sn">SANI</option>
<option value="ep" selected>EPASOLA</option>
<option value="nz">NZETE</option>
<option value="eb" selected>EBALE</option>
</select>

3. Bien entendu, si « multiple » est spécifié alors qu’aucun élément n’est sélectionné, il
n’aura aucun effet.

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


<option value="eb">EBALE</option>
<option value="sn">SANI</option>
<option value="ep">EPASOLA</option>
<option value="nz">NZETE</option>
<option value="eb">EBALE</option>
</select>

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


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

L’accès à un élément HTML/DOM peut se faire de plusieurs manières, soit avec un « 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>
<option value="eb">EBALE</option>
<option value="sn">SANI</option>
<option value="ep" selected>EPASOLA</option>
<option value="nz">NZETE</option>
<option value="eb" selected>EBALE</option>
</select>
</form>

<a href="javascript:void(f())">SUBMIT</a>

<script> "use strict";


const f = _ => {

const s = document.getElementById('iSel');
// Notez l'absence de point devant le nom d'id « iSel »
console.log(s.value) ;

const c = document.querySelector('.cSel');
// Notez le point devant le nom de classe « cSel ».
console.log(s.value) ;

const ss = s.selectedOptions ;
const cs = c.selectedOptions ;

console.log(ss);
console.log(cs);

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

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


}
</script>

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


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

Avec Firefox :

Issu de document.getElementById('iSel');

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

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

Issu de document.getElementById('iSel');

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


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

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

Listage de TOUTES les options (les sélectionnées et non), via la méthode « getEle-
mentsByName », en indiquant celles qui sont sélectionnées :

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


<option value="eb">EBALE</option>
<option value="sn">SANI</option>
<option value="ep" selected="selected">EPASOLA</option>
<option value="nz">NZETE</option>
<option value="eb" selected="selected">EBALE</option>
</select>

<br><button onclick="f()">SUBMIT</button>

<script> "use strict";


const f = _ => {

const s = document.getElementsByName('nSel');
// Notez l'absence de point devant le nom d'id « iSel »

let t="";
for(let i of s[0]) {
t=`${ i.value } <=> ${ i.innerHTML }`;
if(i.selected)t+=" Selected.";
console.log(t);
}
}
</script>

Avec Firefox : Trois options sélectionnées.

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

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


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

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

Les quatre versions/codes ci-après font exactement la même chose, ce sont des façons
différentes d’accéder à un élément DOM.

<form name="fname">
<select name="sname" onchange="fgo()">
<option style="background:#979196;color:#CDDCB6">
Choix
</option>
<option>Volume</option>
<option>Auteur</option>
<option>Année</option>
<option>Prix</option>
</select>
</form>

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

let fgo = _ => {


var selVal = fname.sname.options[
fname.sname.selectedIndex
].value;
var selText = fname.sname.options[
fname.sname.selectedIndex
].text;
if(selVal=="Choix"); // Ne faites rien!
else{
console.log(selVal,selText)
console.log(selVal.padStart(35,"."))
console.log(selText.padEnd(35,"*"))
}
}
</script>

<form name="fname">
<select name="sname" onchange="fgo(fname)">
<option style="background:#979196;color:#CDDCB6">
Choix
</option>
<option>Volume</option>
<option>Auteur</option>
<option>Année</option>
<option>Prix</option>
</select>
</form>

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


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

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

let fgo = p => {


var selVal = p.sname.options[
p.sname.selectedIndex
].value;
var selText = p.sname.options[
p.sname.selectedIndex
].text;
if(selVal=="Choix"); // Ne faites rien!
else{
console.log(selVal,selText)
console.log(selVal.padStart(35,"."))
console.log(selText.padEnd(35,"*"))
}
}
</script>

<form name="fname">
<select name="sname" onchange="fgo(fname)">
<option style="background:#979196;color:#CDDCB6">
Choix
</option>
<option>Volume</option>
<option>Auteur</option>
<option>Année</option>
<option>Prix</option>
</select>
</form>

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

let fgo = p => {


let el=p.sname;
var selVal = el.options[
el.selectedIndex
].value;
var selText = el.options[
el.selectedIndex
].text;
if(selVal=="Choix"); // Ne faites rien!
else{
console.log(selVal,selText)
console.log(selVal.padStart(35,"."))
console.log(selText.padEnd(35,"*"))
}
}
</script>

<form name="fname">
<select name="sname" onchange="fgo(this)">
<option style="background:#979196;color:#CDDCB6">
Choix
</option>
<option>Volume</option>
<option>Auteur</option>
<option>Année</option>
<option>Prix</option>
L’élément < Select > - 11 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

</select>
</form>

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

let fgo = p => {


const el=p;
var selVal = el.options[
el.selectedIndex
].value;
var selText = el.options[
el.selectedIndex
].text;
if(selVal=="Choix"); // Ne faites rien!
else{
console.log(selVal,selText);
console.log(selVal.padStart(35,"."));
console.log(selText.padEnd(35,"*"));
}
}
</script>

Exécution:

D’autres possibilités :

<form name="fName">
<textarea name="iName"
style="width:330;height:80">
</textarea>

<br>OnChange<br>
<select size=3 name="sName" style="width:100">
<option value="Glaucome spl">Gl</option>
<option value="Neurapraxis">Np</option>
<option value="Xérophtalmie">Xo</option>
<option value="Gérontoxon" selected=true>Ge</option>
<option value="Commotion Oc">Blunt</option>
</select>
L’élément < Select > - 12 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

</form>

<script type="text/javascript">
const f_act = _ =>{
var d = fName.iName;
d.value += "Selected Option value: "+s.value+" | ";
}

var s = fName.sName;
s.addEventListener("change", f_act);
</script>

Voici un exemple avec « document.getElementsByName » :


On obtient bien l’index de l’option sélectionnée, de là à obtenir la value et le text il ne reste
qu’un pas (voir page 38 : IV. Avec la « id » ou le « name » de l’élément SELECT).

<form name="fName">
<textarea name="iName"
style="width:700;height:215">
</textarea>

<br>OnChange<br>
<select size=3 name="sName" class="sClass" style="width:100">
<option value="88">Huit-Huit</option>
<option value="Mn">Mélanome</option>
<option value="Nv">Naevus</option>
<option value="Lc">Leucodermie</option>
<option value="Vi">Vitiligo</option>
</select>
</form>

<script type="text/javascript">
let s = document.getElementsByName("sName");

const f_act = _ =>{


var d = fName.iName;
d.value += "document.getElementsByName('sName'): "+s+"\n";
d.value += "document.getElementsByName('sName')[0]: "+s[0]+"\n";
d.value +=
"document.getElementsByName('sName')[0].options: "+
L’élément < Select > - 13 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

s[0].options+"\n";
d.value +=
"document.getElementsByName('sName')[0].options.selectedIndex: "+
s[0].options.selectedIndex+"\n\n";

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


console.log("document.getElementsByName('sName')[0]: ",s[0]);
console.log("document.getElementsByName('sName')[0].options: ",
s[0].options);
console.log(
"document.getElementsByName('sName')[0].options.selectedIndex => ",
s[0].options.selectedIndex+"\n\n");
}

var l = document.querySelector (".sClass");


l.addEventListener("change", f_act);
</script>

Dans la Division :

Dans la console :

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


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

Voici un exemple avec « document.querySelector » :

<div class="dClass"></div>
<div class="dClass" style="height:30">
2è dClass ignoré par le QUERYSELECTOR
</div>

OnChange<br>
<select size=3 style="width:100">
<option value="Glaucome">Gl</option>
<option value="Neurapraxis">Np</option>
<option value="Xérophtalmie">Xo</option>
<option value="Gérontoxon" selected=true>Ge</option>
<option value="Commotion">Blunt</option>
</select>

<select size=3 style="width:100"


onclick="alert('2è SELECT ignoré par QUERYSELECTOR')">
<option value="Mélanome">Ml</option>
<option value="Naevus">Nv</option>
<option value="Pemphigus">Pp</option>
<option value="Leucodermie" selected>Ld</option>
</select>

<script type="text/javascript">
const f_act = _ =>{

var d = document.querySelector('.dClass');
// Seulement la première class cClass rencontrée.
// Remarquez aussi le point (.) dans .dClass.

console.log(
d.value = "Value de l'option sélectionnée : "+
L’élément < Select > - 15 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

s.value);

d.textContent += "Selected Option Value: "+s.value;


d.innerHTML += " | ";
}

var s = document.querySelector('select');
// Seulement le premier élément SELECT rencontré.

s.addEventListener("change", f_act);
</script>

<- Au lancé.

Dans le document :

Dans la console:

Voci un exemple avec « document.getElementById » :

<select id="sid">
<option value="1">Xérophtalmie</option>
<option value="2">Cataracte</option>
<option value="3" selected="selected">Glaucome</option>
<option value="4">Blunt Trauma</option>
<option value="5" selected="selected">Neurapraxis</option>
<option value="6" selected="selected">Hemispherectomie</option>
</select>

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


let s = document.getElementById("sid");
let i = s.selectedIndex;
L’élément < Select > - 16 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

let o = s.selectedOptions;

console.log( "s =",document.getElementById("sid") );


// <select id="sid">

console.log( "s.value =",s.value );


// s.value = 6

console.log( "s.textContent =",s.textContent );


// s.textContent =
// Xérophtalmie
// Cataracte
// Glaucome
// Blunt Trauma
// Neurapraxis
// Hemispherectomie

console.log( "s.selectedIndex =",i );


// s.selectedIndex = 5

console.log( "s.selectedOptions =",o );


// s.selectedOptions = HTMLCollection [ option ]

console.log( "s.value =",s.value); // s.value = 6

console.log( "s[i] =",s[i]);


// s[i] = <option value="6" selected="selected">

console.log( "s[i].value =",s[i].value); // s[i].value = 6


console.log( "s[o] =",s[o] ); // s[o] = undefined

console.log( "s[i].text =",s[i].text); // Hemispherectomie


console.log( "s[i].textContent =",s[i].textContent );
// Hemispherectomie

console.log(
"document.getElementById('sid').selectedOptions[0].value =",
document.getElementById('sid').selectedOptions[0].value);
//
// document.getElementById('sid').selectedOptions[0].value = 6

console.log( "o[0].value =",o[0].value ); // o[0].value = 6


console.log( "o[0] =",o[0] ); //
// o[0] = <option value="6" selected="selected">
</script>

Exécution :

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


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

Avec Firefox :

Avec Yandex :

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


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

Un peu plus de détails / possibilités :

<form name="nForm">
<select class="clist" name="nlist" id="ilist" onmouseover="f()">
<option value="88">Classe1</option>
<option value="72">Classe2</option>
<option value="53" selected=selected>Classe3</option>
<option value="97">Classe4</option>
<option value="39">Classe5</option>
</select>
</form>

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


console.log(`=`.repeat(30)+`\nAvec NAME\n`+`=`.repeat(30))

console.log(
`document.nForm.nlist =`,
document.nForm.nlist+`\n\n`);

console.log(
`document.nForm.nlist.value =`,
document.nForm.nlist.value+`\n\n`);

console.log(
`document.nForm.nlist.textContent =`,
document.nForm.nlist.textContent+`\n\n`);

console.log(
`document.nForm.nlist.options =`,
document.nForm.nlist.options+`\n\n`);
L’élément < Select > - 19 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

console.log(
`document.nForm.nlist.options.selectedIndex =`,
document.nForm.nlist.options.selectedIndex+`\n\n`);

console.log(
`document.nForm.nlist.options
[document.nForm.nlist.options.selectedIndex] =` ,
document.nForm.nlist.options
[document.nForm.nlist.options.selectedIndex]+`\n\n`);

console.log(
`document.nForm.nlist.options
[document.nForm.nlist.options.selectedIndex].value =`,
document.nForm.nlist.options
[document.nForm.nlist.options.selectedIndex].value+`\n\n`);

console.log(
`document.nForm.nlist.options
[document.nForm.nlist.options.selectedIndex].text =`,
document.nForm.nlist.options
[document.nForm.nlist.options.selectedIndex].text+`\n\n`);

console.log(
`document.nForm.nlist.options
[document.nForm.nlist.options.selectedIndex].textContent =`,
document.nForm.nlist.options
[document.nForm.nlist.options.selectedIndex].textContent+`\n\n`);

console.log(`=`.repeat(30)+`\nAvec CLASS\n`+`=`.repeat(30))

console.log(
`document.querySelector('.clist').innerHTML =`,
document.querySelector('.clist').innerHTML+`\n\n`);

console.log(
`document.querySelector('.clist').selectedIndex.value =`,
document.querySelector('.clist').selectedIndex.value+`\n\n`);

console.log(
`document.querySelector('.clist')
[document.querySelector('.clist').selectedIndex] =`,
document.querySelector('.clist')
[document.querySelector('.clist').selectedIndex]+`\n\n`);

console.log(
`document.querySelector('.clist')
[document.querySelector('.clist').selectedIndex].value =`,
document.querySelector('.clist')
[document.querySelector('.clist').selectedIndex].value+`\n\n`);

console.log(
`document.querySelector('.clist')
L’élément < Select > - 20 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

[document.querySelector('.clist').selectedIndex].text =`,
document.querySelector('.clist')
[document.querySelector('.clist').selectedIndex].text);

console.log(`=`.repeat(30))

console.log( `document.getElementById('ilist').innerText =`);


console.log(`${document.getElementById('ilist').innerText}`);
</script>

ScreenShots de l’exécution :

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


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

.!. ATTENTION .!.

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


l’instruction suivante :

document.getElementById("list").value="NIMPORTEQUOI";

sélectionne donc l’option qui a la value « NIMPORTEQUOI ». Si aucune option n’a la 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()">
<option value="30">Classe0</option>
<option value="88">Classe1</option>
<option value="72">Classe2</option>
<option value="53">Classe3</option>
<option value="97">Classe4</option>
<option value="39">Classe5</option>
<option value="13">Classe6</option>

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


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

<option value="55">Classe7</option>
<option value="98">Classe8</option>
<option value="26">Classe9</option>
</select>
</form>

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


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

Avec donc

document.getElementById("list").value=97;

Exécution :

->

Avec

document.getElementById("list").value=970;

Exécution :

->

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


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

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()">
<option value="30">Classe0</option>
<option value="88">Classe1</option>
<option value="72">Classe2</option>
<option value="53">Classe3</option>
<option value="97">Classe4</option>
<option value="39">Classe5</option>
<option value="13">Classe6</option>
<option value="55">Classe7</option>
<option value="98">Classe8</option>
<option value="26">Classe9</option>
</select>
</form>

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


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

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


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

Avec

document.getElementsByName("list").value=97;

->

Avec

document.getElementsByName("list").value=970;

idem.

Avant toute chose, signalons qu’on peut étiqueter (labeliser) les options d’une sélection :

<form name="fName">
<select size=3 id="isel" name="nsel" onContextMenu="fsel(isel)">
<label for="iNY"></label>
<option value="GLC">Glaucome</option>
<option value="PRB" selected>Presbytie</option>
<option value="NYS" id="iNY">Nystagmus</option>
</select>
</form>

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


const fsel = i => {
console.log("Dans fsel(nsel)");
console.log("i.options =", i.options);
console.log("i.options.selectedIndex =", i.options.selectedIndex);
console.log("i.options.length =",i.options.length);
console.log("i.options.iNY =",i.options.iNY);

console.log("i.options[iNY] =",i.options[iNY]);
// i.options[iNY] = undefined

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


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

alert("Observez le changement de sélection")


console.log(
"i.options.iNY.selected=true =",i.options.iNY.selected=true);

console.log("i.options.label =",i.options.label);
// i.options.label = undefined

console.log("i.options.item =",i.options.item);
console.log("i.options.item(0) =",i.options.item(0));
}
</script>

Exécution :

À l’affichage de la liste déroulante, « cliquez –droit » sur « Glaucome », et après avoir


fermé le message pop-up vous verrez que la sélection aura passé à « Nystagmus », et
lisez les messages affichés dans la console pour découvrir les propriétés de l’élément (ou
objet) « option » de l’élément (encore un objet) « select ».

->
15:17:11,088 Dans fsel(nsel) test.html:13:2

15:17:11,093 i.options = HTMLOptionsCollection {


0: option,
1: option,
2: option#iNY,
length: 3,
selectedIndex: 1,
… } test.html:14:2

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>

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


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

<option value="PRB" selected>Presbytie</option>


<option value="NYS" id="iNY">Nystagmus</option>
</select>
</form>

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


const fsel = function(i) {
console.log("Dans fsel(isel)");
console.log("i.options =", i.options);
console.log("i.options.selectedIndex =", i.options.selectedIndex);
console.log("i.options.length =",i.options.length);
console.log("i.options.iNY =",i.options.iNY);

console.log("i.options[iNY] =",i.options[iNY]);
// i.options[iNY] = undefined

alert("Observez le changement de sélection")


console.log(
"i.options.iNY.selected=true =",i.options.iNY.selected=true);

console.log("i.options.label =",i.options.label);
// i.options.label = undefined

console.log("i.options.item =",i.options.item);
console.log("i.options.item(0) =",i.options.item(0));
}

// Une option peut être manipulée


// individuellement et directement.
const fWheel = function(){
console.log("Dans fWheel()");
alert("Observez le changement de la 'value' et du 'text' ");
document.getElementById("iGL").value = "nVAL";
document.getElementById("iGL").text = "nTXT";
document.getElementById("iGL").selected = "selected";

document.getElementById("iGL").id = "nID";
// Changement de la valeur de 'id' en 'nID',

// Ci-dessous, utilisation de la nouvelle 'id'.


const s=document.getElementById("nID");
console.log(
"s.selected =", s.selected + " , " +
"s.value ",s.value + " , " +
"s.text =",s.text
);
}
</script>

Exécution :

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


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

Tout d’abord « cliquez-droit » sur « Glaucome », puis fermer le « pop-up » et le « menu


contextuel », et lisez ce qui est déjà affiché dans la fenêtre de la console.

Avec Yandex :

-> « Click-droit » sur « Glaucome »

->

->
Puis placez le curseur de la souris au-dessus du menu déroulant, et tournez très douce-
ment le « Wheel » de la souris.

De nouveau on a une notification :

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


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

Fermez ce message et notez la nouvelle option sélectionnée, mais aussi qu’elle a changé
de value et de label, et lisez la suite des messages de la console.

Voici l’ensemble de l’affichage dans la fenêtre de la console avec Yandex :

22:58:13.950 test.html:13 Dans fsel(isel)

22:58:13.954 test.html:14
i.options = HTMLOptionsCollection(3) [
option#iGL, option, option#iNY,
iGL: option#iGL, iNY: option#iNY,
selectedIndex: 1
]

1. HTMLOptionsCollection(3) [option#iGL, option, option#iNY, iGL: option#iGL,


iNY: option#iNY, selectedIndex: 1]

1. 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
L’élément < Select > - 29 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

i.options.iNY =
<option value="NYS" id="iNY">Nystagmus</option>

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 :

-> ->

->

->

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


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

23:24:19,359 Dans fsel(isel) test.html:13:2

23:24:19,360 i.options = HTMLOptionsCollection {


0: option#iGL,
1: option,
2: option#iNY,
length: 3,
selectedIndex: 1,

} test.html:14:2

HTMLOptionsCollection
0: <option id="nID" value="nVAL">
1: <option value="PRB" selected="">
2: <option id="iNY" value="NYS">
iNY: <option id="iNY" value="NYS">
length: 3
nID: <option id="nID" value="nVAL">
selectedIndex: 0

<prototype>: HTMLOptionsCollectionPrototype {
add: add(), remove: remove(),
length: Getter & Setter, …
}

23:24:19,364 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

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


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

Voyons maintenant la structure d’un objet select avec différents moyens d’acquisition de
l’élément SELECT :

I. Version avec « document.getElementsByName("isel") » :

<select size=3 id="isel" name="nsel"


onMouseOut="fsel(null)"
onClick="fsel(this,1)"
onChange="fsel(nsel,2)"
onKeyUp="fsel(isel,3)">
<option value="NYS">Nystagmus</option>
<option value="PRB" selected>Presbytie</option>
<option value="GLC">Glaucome</option>
</select>

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


const fsel = (p,q) => {
console.log("Dans fsel(null)");
let s,r;
if(!p){
s=document.getElementsByName("isel");
console.log(s);
}
}
</script>

Exécutions :

Pointez l’ascenseur de la liste puis retirer le curseur de la souris sans parcourir les 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
L’élément < Select > - 32 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

__proto__: NodeList

II. Version avec « this »

<select size=3 id="isel">


<option value="NYS">Nystagmus</option>
<option value="PRB" selected>Presbytie</option>
<option value="GLC">Glaucome</option>
</select>

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


const fsel = _ => {
console.log(s.options[s.selectedIndex].value,
'=>',
s.options[s.selectedIndex].text);
}
const s=document.getElementById("isel");
s.addEventListener("click", fsel, false);
</script>

Exécutions :

Pointez l’ascenseur de la liste puis retirer le curseur de la souris sans parcourir les 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">
<select size=3 id="isel" name="nsel"
onClick="fsel(this,1)"
onChange="fsel(name,2)"
onSelect="fsel(id,5)"
onMouseOut="fsel(null)"
onKeyUp="fsel(isel,3)"
onWheel="fsel(nsel,4)">
<option value="NYS">Nystagmus</option>
<option value="PRB" selected>Presbytie</option>
<option value="GLC">Glaucome</option>
</select>
</form>
L’élément < Select > - 33 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

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


const fsel = (p,q) => {
let s,r;
if(q==4){
console.log("Dans document.forms['fName'].elements[0]");
s=document.forms['fName'].elements[0]
console.log(s);
}
}
</script>

Exécution :

Avec Firefox Quantum 64.0b13:

11:03:21,331 Dans Dans document.forms['fName'].elements[0]


test.html:20:7

11:03:21,333 <select id="isel" size="3" name="nsel"


onclick="fsel(this,1)"
onchange="fsel(name,2)"
onselect="fsel(id,5)"
onmouseout="fsel(null)"
onkeyup="fsel(isel,3)"
onwheel="fsel(nsel,4)"> test.html:22:7

select#isel
0: <option value="NYS">
1: <option value="PRB" selected="">
2: <option value="GLC">

accessKey: ""
accessKeyLabel: ""

attributes: NamedNodeMap(9) [ size="3", id="isel", name="nsel", … ]

childElementCount: 3

childNodes: NodeList(7) [ #text, option, #text, … ]

children: HTMLCollection(3) [ option, option, option]

form: <form name="fName">

id: "isel"

innerHTML:
"\n <option value=\"NYS\">Nystagmus</option>
L’élément < Select > - 34 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

\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

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


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

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

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


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

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(), …
}

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


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

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">
<select size=3 id="isel" name="nsel"
onClick="fsel(this,1)"
onChange="fsel(name,2)"
onSelect="fsel(id,5)"
onMouseOut="fsel(null)"
onKeyUp="fsel(isel,3)"
onWheel="fsel(nsel,4)">
<option value="NYS">Nystagmus</option>
<option value="PRB" selected>Presbytie</option>
<option value="GLC">Glaucome</option>
</select>
</form>

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


const fsel = (p,q) => {
let s,r;
if(q==3 || q==4){
console.log("Dans fsel(isel et nsel)");

r=document.forms['fName'].isel
console.log(r);

s=document.forms['fName'].nsel
console.log(s);

s=document.getElementsByName('fName')
console.log(s);

s=document.getElementsByName('fName')[0]
console.log(s);

s=document.getElementsByName('nsel')
console.log(s);
L’élément < Select > - 38 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

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">
<select size=3 id="isel" name="nsel"
onClick="fsel(this,1)"
L’élément < Select > - 39 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

onChange="fsel(name,2)"
onContextMenu="fsel(id,5)"
onMouseOut="fsel(null)"
onKeyUp="fsel(isel,3)"
onWheel="fsel(nsel,4)">
<option value="NYS">Nystagmus</option>
<option value="PRB" selected>Presbytie</option>
<option value="GLC">Glaucome</option>
</select>
</form>

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


const fsel = (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

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


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

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="NYS">Nystagmus</option>
<option value="PRB" selected="">Presbytie</option>
<option value="GLC">Glaucome</option>

12:43:30.996 test.html:38
s.outerHTML =
<select size="3" id="isel" name="nsel"
onclick="fsel(this,1)" onchange="fsel(name,2)"
oncontextmenu="fsel(id,5)" onmouseout="fsel(null)"
onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)">
<option value="NYS">Nystagmus</option>
<option value="PRB" selected="">Presbytie</option>
<option value="GLC">Glaucome</option>
</select>

12:43:30.997 test.html:40
s.textContent =
Nystagmus
Presbytie
Glaucome

12:43:30.997 test.html:42 s.text = undefined

12:43:30.997 test.html:45 ==================================================

Exécution avec Firefox :

12:53:45,454 ================================================== test.html:45:7

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


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

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"
onclick="fsel(this,1)" onchange="fsel(name,2)"
oncontextmenu="fsel(id,5)" onmouseout="fsel(null)"
onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)"> test.html:26:7

12:53:47,377 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="NYS">Nystagmus</option>
<option value="PRB" selected="">Presbytie</option>
<option value="GLC">Glaucome</option> test.html:36:7

12:53:47,381
s.outerHTML =
<select size="3" id="isel" name="nsel"
onclick="fsel(this,1)" onchange="fsel(name,2)"
oncontextmenu="fsel(id,5)" onmouseout="fsel(null)"
onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)">
<option value="NYS">Nystagmus</option>
<option value="PRB" selected="">Presbytie</option>
<option value="GLC">Glaucome</option>
</select> test.html:38:7

12:53:47,381
s.textContent = Nystagmus Presbytie Glaucome test.html:40:7

12:53:47,381
s.text = undefined test.html:42:7

12:53:47,382
================================================== test.html:45:7

VI. Avec fsel ( id ) :


L’élément < Select > - 42 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

<form name="fName">
<select size=3 id="isel" name="nsel"
onClick="fsel(this,1)"
onChange="fsel(name,2)"
onContextMenu="fsel(id,5)"
onMouseOut="fsel(null)"
onKeyUp="fsel(isel,3)"
onWheel="fsel(nsel,4)">
<option value="NYS">Nystagmus</option>
<option value="PRB" selected>Presbytie</option>
<option value="GLC">Glaucome</option>
</select>
</form>

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


const fsel = (i,q) => {
let s;
if(q==5){
s=i
console.log("Dans fsel(id)");

console.log(s);

s=document.getElementById(s);

console.log("s.value =",s.value);

console.log("s.attributes =",s.attributes);

console.log("s.multple =",s.multple);

console.log("s.innerHTML =",s.innerHTML);

console.log("s.outerHTML =",s.outerHTML);

console.log("s.textContent =",s.textContent);

console.log("s.text =",s.text);
// « text » n'est pas attribut de Select.

console.log("".padEnd(50,"="));
}
}
</script>

Exécution avec Firefox :

13:09:27,480 Dans fsel(id) test.html:21:7

13:09:27,482 isel test.html:23:7

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


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

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="NYS">Nystagmus</option>
<option value="PRB" selected="">Presbytie</option>
<option value="GLC">Glaucome</option> test.html:33:7

13:09:27,491
s.outerHTML =
<select size="3" id="isel" name="nsel"
onclick="fsel(this,1)" onchange="fsel(name,2)"
oncontextmenu="fsel(id,5)" onmouseout="fsel(null)"
onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)"
>
<option value="NYS">Nystagmus</option>
<option value="PRB" selected="">Presbytie</option>
<option value="GLC">Glaucome</option>
</select> test.html:35:7

13:09:27,492
s.textContent = Nystagmus Presbytie Glaucome test.html:37:7

13:09:27,493
s.text = undefined test.html:39:7

13:09:27,493
================================================== test.html:42:7

Exécution avec Yandex :

13:16:54.883 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

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


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

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 =


<option value="NYS">Nystagmus</option>
<option value="PRB" selected="">Presbytie</option>
<option value="GLC">Glaucome</option>

13:16:54.903 test.html:35
s.outerHTML =
<select size="3" id="isel" name="nsel"
onclick="fsel(this,1)" onchange="fsel(name,2)"
oncontextmenu="fsel(id,5)" onmouseout="fsel(null)"
onkeyup="fsel(isel,3)" onwheel="fsel(nsel,4)"
>
<option value="NYS">Nystagmus</option>
<option value="PRB" selected="">Presbytie</option>
<option value="GLC">Glaucome</option>
</select>

13:16:54.904 test.html:37
s.textContent =
Nystagmus
Presbytie
Glaucome

13:16:54.904 test.html:39 s.text = undefined

13:16:54.904 test.html:42
==================================================

Voici un Double-Exemple simple gérant un élément SELECT :

La première fonction, « dispSelectedItem ( this ) » reçoit en paramètre une copie de


l’élément SELECT ONCLICK et le gère.

La deuxième fonction, « dispSelectedItem_2 () » récupère elle-même l’élément SELECT


Avec la méthode « getElementById ( «sId» ) » pour le gérer.

Les deux donnent exactement le même résultat.

Notez la syntaxe très simplifiée pour accéder à la valeur et au texte, par rapport aux syn-
taxes qu’on verra plus loin.

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


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

<form name="myForm">
<select id="sname" onChange=dispSelectedItem(this)>
<option value=CAT>Cataracte</option>
<option value=CEC>Cécité</option>
<option value=GLC>Glaucome</option>
</select>
</form>

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


let dispSelectedItem = s => {
console.log("DANS « dispSelectedItem () »");
let selElIdxThis = s.selectedIndex,
selValThis = s[selElIdxThis].value,
selTextThis = s[s.selectedIndex].text;

console.log("*** Avec SELECT passé via THIS :");


console.log("Select = ",s);
console.log("selectedIndex =", selElIdxThis );
console.log("Value =", selValThis );
console.log("Text =",selTextThis);

dispSelectedItem_2();
}
</script>

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


let dispSelectedItem_2 =_=> {
console.log("\nDANS « dispSelectedItem_2 () »");
console.log("*** Avec SELECT obtenu via GETELEMENTBYID :")
let sEl=document.getElementById("sname"),
selElIdx = sEl.selectedIndex,
selVal = sEl[sEl.selectedIndex].value,
selText = sEl[sEl.selectedIndex].text;

console.log("Select = ",sEl);
console.log("selectedIndex =", selElIdx);
console.log("Value =", selVal);
console.log("Text =", selText);
}
</script>

Exécution :

À partir de cette liste déroulante repliée,

sélectionnez par exemple Glaucome :

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


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

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>
<option value="GLC">Glaucome</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>
<option value="GLC">Glaucome</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 :

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


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

<body>
Sélection Section<br>
<select id="section" onchange="fOnClick(this);" size="7">
<option value=null>Select a Continent</option>
<option value="crane">Crane</option>
<option value="oeil">Oeil</option>
<option value="oreille">Oreille</option>
<option value="tronc">Tronc</option>
<option value="abdomen">Abdomen</option>
</select>

<br><br>Sélection organe<br>
<select id="organe" class="cOrg" size="7">
<option value="0">ORGANE INITIAL</option>
<option value="1">Pied</option>
<option value="2">Cheveu</option>
<option value="3">Ongle</option>
<option value="4">Peau</option>
</select>
</body>

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


const listOrgans = new Array(4)
listOrgans[null] = ["Sélection organe"];
listOrgans["crane"] = ["I = Olfactif", "II = Optique", " IV = Pathétique", "V
= Trijumeau", "VII = Facial", "X = Pneumogastrique (=Vague)"];
listOrgans["oeil"] = ["Rétine", "Descemet", "Hyaloéde", "Bruch", "Gliales",
"Amacrine"];
listOrgans["oreille"] = ["Vestibule", "étrier", "Tympan", "Cochléa"];
listOrgans["tronc"]= ["Médiastin", "Thymus", "Coeur", "Plévre"];
listOrgans["abdomen"]= ["Mésentére", "épiploon", "Péritoine"];

function fOnClick(sElm) {
const idx = sElm.selectedIndex;
const listOrgIdx = sElm.options[idx].value;

const curList = listOrgans[listOrgIdx];


// listOrgans à sélectionner dans la collection élistOrgansé.

const oS = document.querySelector(".cOrg");
// le <select> de éclass=cOrgé
// N'oubliez pas le point dans .cOrg.

// Effacer la liste des options en cours dans


// le <select> cible (les supprimer toutes).
oS.options.length = 0;

// Maintenant y injecter les nouvelles options


let nvlleOption;
for (var i=0; i<curList.length; i++) {
nvlleOption = document.createElement("option");
nvlleOption.value = curList[i];

nvlleOption.textContent = curList[i];
// ou nvlleOption.text = curList[i];

// Injecter la nouvelle option


try {
oS.add(nvlleOption); // IE
}
catch (e) {
oS.appendChild(nvlleOption); // DOM
L’élément < Select > - 48 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

}
}
}
</script>

2ème Méthode (parmi beaucop d’autres) de gérer deux listes liées :

<form name="myForm">
<select size=3 onChange=dispSelectedItem(this)>
<option value=GM>Goma</option>
<option value=LZ>Luozi</option>
<option value=MD>Modu</option>
</select>

<select size=3 id="pv" onChange="dispSelectedItem_2()">


<option value="BC">Bas-Congo</option>
<option value="ET">Est</option>
</select>
L’élément < Select > - 49 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

</form>

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


let dispSelectedItem = s => {
let selElIdxThis = s.selectedIndex,
selValThis = s[selElIdxThis].value,
loc;

let sPv=document.getElementById("pv");
if(selValThis=="LZ"){
sPv.selectedIndex=0;
loc=s[selElIdxThis].text+" se trouve dans : "+
sPv[0].value+" ("+sPv[0].text+")";
}
else if(selValThis=="GM"){
sPv.selectedIndex=1;
loc=s[selElIdxThis].text+" se trouve dans : "+
sPv[1].value+" ("+sPv[1].text+")";
}
else if(selValThis=="MD"){
sPv.selectedIndex=-1;
loc=s[selElIdxThis].text+" se trouve dans : "+
"Inconnu";
}
console.log(loc);
}
</script>

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


let dispSelectedItem_2 = _ => {
let s=document.getElementById("pv"),
selElIdxThis = s.selectedIndex,
selValThis = s[selElIdxThis].value,
loc;

if(selValThis=="BC"){
s.selectedIndex=0;
loc=s[selElIdxThis].value+" ("+s[selElIdxThis].text+")";
}
else if(selValThis=="ET"){
s.selectedIndex=1;
loc=s[selElIdxThis].value+" ("+s[selElIdxThis].text+")";
}

console.log(loc);
}
</script>

Exécution :

Cliques sur « Luozi » dans la première liste, et voyez ce qui se passe. Une option est
automatiquement sélectionnée dans la deuxième liste, et des messages s’affichent.

->
L’élément < Select > - 50 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

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.
L’élément < Select > - 51 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

Parcours des options avec la boucle « for…in » : ne fonctionne pas bien.

<select id="selId" onclick="fsel();">


<option value=
"http://diasmath.blogg.org">
diasmath
</option>

<option value=
"http://www.amessi.org/diasoluka" selected="Selected">
diasoluka
</option>

<option value=
"https://www.youtube.com/watch?v=UUlPUdTALWQ">
Video
</option>
</select>

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


const sel=document.getElementById('selId');
const fsel = _ => {
console.log("BEWARE, SOMEONE HAS DARED TRESPASSING");
console.log("THIS « SELECT » ELEMENT BY CLICKING.");
for(let k in sel.options) {
console.log(sel.options[k].value)
}
};
</script>

Exécution :

6 options non déclarées en trop. Préférez donc l’une des formes qui suivent :

A. Parcours des options avec la boucle « for…to » : fonctionne mieux.

<select id="selId" onclick="fsel();">

<option value=
"http://diasmath.blogg.org">
diasmath
</option>

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


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

<option value=
"http://www.amessi.org/diasoluka" selected="Selected">
diasoluka
</option>

<option value=
"https://www.youtube.com/watch?v=UUlPUdTALWQ">
Video
</option>
</select>

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


const sel=document.getElementById('selId');

console.log(
"sel.length =", sel.length, ", ",
"sel.options.length =", sel.options.length
);
// sel.length = 3 sel.options.length = 3

const fsel = _ => {


console.log("BEWARE, SOMEONE HAS DARED TRESPASSING");
console.log("THIS « SELECT » ELEMENT BY CLICKING.");
for(let k=0,l=sel.length ; k<l ; k++) {
console.log(sel.options[k].value)
}
};
</script>

B. Parcours des options avec la boucle « for…of » : fonctionne aussi mieux.


Vous avez aussi un petit bonus : l’affichage de l’option sélectionnée.

<select id="selId" onmouseup="fsel();">

<option value=
"http://diasmath.blogg.org">
diasmath
</option>

<option value=
"http://www.amessi.org/diasoluka" selected="Selected">
diasoluka
</option>

<option value=
"https://www.youtube.com/watch?v=UUlPUdTALWQ">
L’élément < Select > - 53 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

Video
</option>

</select>

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


var sel=document.getElementById('selId');
const fsel = _ => {
var isl;
console.log("BEWARE, SOMEONE HAS DARED TRESPASSING");
console.log("THIS « SELECT » ELEMENT BY CLICKING.");

for(let k of sel.options) {
console.log(" * ",k.value);
if ( sel.options[sel.selectedIndex].selected === true ) {
isl = sel.options[sel.selectedIndex];
}
}
console.log(
"L'option sélectionnée =",
isl.text,"=>",
isl.value,
"\n","=".repeat(15),"\n");
}
</script>

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


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

La liste complète des EventHandlers : voyez les « onMachinTruc » plus loin (page 7).

L’EventHandler bénéficie de toute la compliance de JavaScript.

Commençons par cet exemple simple :

<form name="fname">
<select id="sname" onchange="dispSelectedItem()">

<optgroup>Auteur
<option style="background:#979196;color:#CDDCB6" value="nada">
Avec « value »
</option>
<option value="Kuzayinsi">kzn</option>
<option value="Benakio" selected="Selected">bnk</option>
<option value="Ndozi">ndz</option>
</optgroup>

<optgroup>Volume
<option style="background:#979196;color:#CDDCB6" value="nada">
Sans « value »
</option>
<option>2003</option>
<option>2010</option>
<option>2018</option>
</optgroup>

<optgroup>URLs
<option style="background:#979196;color:#CDDCB6" value="nada">
URLs
</option>
<option value="http://diasmath.blogg.org">diasmath</option>
<option value=
"http://gha.centerblog.net/4-GHA-Nouvelle-Arme-pour-TUER-LA-MORT">
GHA-Nouvelle-Arme-pour-TUER-LA-MORT
</option>
<option value="https://www.youtube.com/watch?v=UUlPUdTALWQ">
Video
</option>
</optgroup>
</select>
</form>

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


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

<textarea id="txtarea" style="height:150;width:350"></textarea>

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


let dispSelectedItem = _ => {
let selEl = document.getElementById("sname");
let selVal = selEl.value,
selText = selEl.options[selEl.selectedIndex].text;

if(selVal!="nada") {
document.getElementById("txtarea").innerHTML +=
selText +" : "+ selVal + "\n\n"

if(selVal.startsWith("http")) window.open(selVal);
}
}

let dispSelectedItem2 = _ => {


let selEl2 = document.getElementById("sname");
let selVal2 = selEl2.options[selEl2.selectedIndex].value,
selText2 = selEl2.text;

if(selVal2!="nada") {
console.log(selText2 , selVal2)
}
}

onload = dispSelectedItem2;
// Dès le chargement :
// dispSelectedItem() doit déjà être définie.
</script>

On peut aussi directement accéder aux options d’un élément « select » via l’alias « this »,
au lieu de la longue formule

«
document.getElementById("sname")
.
options[document.getElementById("sname").selectedIndex].value
»

surtout dans sa forme complète!

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


let getval = sel => {
window.open(sel.value);
}
</script>

<select onchange="getval(this);">
L’élément < Select > - 56 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

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

</select>

Au lieu de pointer une fonction externe à exécuter (exécuter une fonction externe), l’Event
(ici « onchange ») peut directement exécuter la fonction localement :

<select onchange="(function(p){console.log(p.value)})(this);">

<option value=
"http://diasmath.blogg.org">
diasmath
</option>

<option value=
"http://www.amessi.org/diasoluka">
diasoluka
</option>

<option value=
"https://www.youtube.com/watch?v=UUlPUdTALWQ">
Video
</option>

</select>

Exécution :

19:01:26,976 http://www.amessi.org/diasoluka test.html:1:14


19:01:28,293 https://www.youtube.com/watch?v=UUlPUdTALWQ test.html:1:14
19:01:29,484 http://diasmath.blogg.org test.html:1:14

Au lieu d’une fonction, l’Event peut exécuter n’importe quelle instruction valide et isolée :

<select onchange="console.log(this.value);">

<option value=

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


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

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

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

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


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

On peut plus facilement manipuler la « value » de l’élément « select » avec « event » :

<script type="text/javascript">
const d = document.querySelector("idt");
function selectAction(event) {
idt.innerHTML+=`value = ${event.target.value}\n`;
}
</script>

OnChange<br>
<label>Votre choix :<br></label>
<select size="6" onchange="selectAction(event);" id="sel">
<option value="nom">DIASOLUKA</option>
<option value="prenom">Luyalu</option>

<!-- 1er MéTHODE D'AJOUT DE NVLLE OPTION -->

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

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


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

<br><textarea id="idt" style="width:233;height:100"


placeholder=`Cliquez_ici_pour_afficher_l'event.`>
</textarea>
<br><button id="ida" style="width:233">AJOUT D'OPTION & l'Event</button>

<script>
let cptr=0;
document.getElementById('ida').addEventListener('click', function(e) {
const s = document.getElementById("sel");

// 2é MéTHODE D'AJOUT DE NVLLE OPTION


s.options[s.options.length] =
new Option('New Text' + ++cptr, 'new_value' + cptr);
// Fin ajout de nvlle OPTION
});

document.getElementById('idt').addEventListener('click', function(e) {
const s = document.getElementById("sel");
console.log("Current Select Options =",s.options);

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);
L’élément < Select > - 60 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

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"


placeholder="`Cliquez_ici_pour_afficher_l'event.`">
test.html:46:7
L’élément < Select > - 61 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

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"


placeholder="`Cliquez_ici_pour_afficher_l'event.`">
test.html:53:7

e.originalTarget = <div class="anonymous-div inherit-scroll-behavior">


test.html:54:7

e.defaultPrevented = false test.html:55:7

e.preventDefault = function preventDefault()


test.html:56:7

e.detail = 1 test.html:57:7
e.eventPhase = 2 test.html:58:7
e.explicitOriginalTarget = <textarea id="idt" style="width:233;height:100"
placeholder="`Cliquez_ici_pour_afficher_l'event.`">
test.html:59:7

e.isTrusted = true 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"


placeholder="`Cliquez_ici_pour_afficher_l'event.`">
test.html:81:7

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


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

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>

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


function fSelectedIndex(p=1) {
const e = document.getElementById("sel");
if(p==1){
let i = e.options[e.selectedIndex];
console.log("L'index de l'option sélectionnée est ", e.selectedIndex);
if(e.selectedIndex!=-1){
console.log("Label = ", i.text, ', value = ', i.value);
}
}

else if(p==4){
e.selectedIndex=p;
let i = e.options[e.selectedIndex];
console.log("L'index actuel d'option sélectionnée = ", e.selectedIndex);
console.log("Label = ", i.text, ', value = ', i.value);
}

else if(p==-1){
e.selectedIndex=p;
L’élément < Select > - 63 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

let i = e.options[e.selectedIndex];
console.log("L'index actuel d'option sélectionnée = ", e.selectedIndex);
}

console.log("<RET> pour sélectionner la dernière option");


console.log("<CLICK Etoile> pour tout DÉsélectionner\n\n");
}
</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:32:58,739 <RET> pour sélectionner la dernière option test.html:45:5
23:32:58,740 <CLICK Etoile> pour tout DÉsélectionner test.html:46:5

23:33:03,608 L'index actuel d'option sélectionnée = -1 test.html:42:7


23:33:03,609 <RET> pour sélectionner la dernière option test.html:45:5
23:33:03,609 <CLICK Etoile> pour tout DÉsélectionner test.html:46:5

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


23:33:03,611 <RET> pour sélectionner la dernière option test.html:45:5
23:33:03,611 <CLICK Etoile> pour tout DÉsélectionner test.html:46:5

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 »

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


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

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 »).

<label>VOTRE CHOIX :<br></label>


<select size="5" id="sel">

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

<br><br>Avec e.selectedIndex = p-1;<br>


<input id="idi" onChange="fSelectedIndex(value , 1)">

<br><br>Avec e.options[p-1].selected = true;<br>


<input id="idi" onChange="fSelectedIndex(value , 2)">

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


function fSelectedIndex(p, q) {
const e = document.getElementById("sel");

if(q==1) {
console.log(
" AVEC « E.SELECTEDINDEX=P-1 » "
.padStart(45,"*").padEnd(50,"*")
);
console.log("".padEnd(50,"="));
e.selectedIndex=p-1;
}

else if(q==2) {
console.log(
" AVEC « E.OPTIONS[P-1].SELECTED = TRUE » "
.padStart(45,"*").padEnd(50,"*")
);
console.log("".padEnd(50,"="));
e.options[p-1].selected = true;
}

let i = e.options[e.selectedIndex];
console.log(

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


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

"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

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


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

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


================================================== test.html:42:9
Le VRAI [0->] index actuel d'option sélectionnée = 4 test.html:47:5
Label = * CETTE ANNÉE *, value = 13/11/2018 test.html:48:5
<RET> pour sélectionner la dernière option test.html:50:5
<CLICK Etoile> pour tout DÉsélectionner test.html:51:5

*************** AVEC « E.SELECTEDINDEX=P-1 » ***** test.html:29:9


================================================== test.html:33:9
Le VRAI [0->] index actuel d'option sélectionnée = 0 test.html:47:5
Label = * NOM *, value = Diasoluka test.html:48:5
<RET> pour sélectionner la dernière option test.html:50:5
<CLICK Etoile> pour tout DÉsélectionner test.html:51:5

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


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

*************** AVEC « E.SELECTEDINDEX=P-1 » ***** test.html:29:9


================================================== test.html:33:9
Le VRAI [0->] index actuel d'option sélectionnée = -1 test.html:47:5

TypeError: i is undefined[En savoir plus] test.html:48:5


fSelectedIndex file:///K:/DADET/PROGS/test.html:48:5
onchange file:///K:/DADET/PROGS/test.html:1:1

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


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

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


fSelectedIndex file:///K:/DADET/PROGS/test.html:43:9
onchange file:///K:/DADET/PROGS/test.html:1:1

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


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

*************** AVEC « E.SELECTEDINDEX=P-1 » ***** test.html:29:9


================================================== test.html:33:9
Le VRAI [0->] index actuel d'option sélectionnée = -1 test.html:47:5

TypeError: i is undefined[En savoir plus] test.html:48:5


fSelectedIndex file:///K:/DADET/PROGS/test.html:48:5
onchange file:///K:/DADET/PROGS/test.html:1:1

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


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

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


fSelectedIndex file:///K:/DADET/PROGS/test.html:43:9
onchange file:///K:/DADET/PROGS/test.html:1:1

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


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

*************** AVEC « E.SELECTEDINDEX=P-1 » ***** test.html:29:9


================================================== test.html:33:9
Le VRAI [0->] index actuel d'option sélectionnée = -1 test.html:47:5

TypeError: i is undefined[En savoir plus] test.html:48:5


fSelectedIndex file:///K:/DADET/PROGS/test.html:48:5
onchange file:///K:/DADET/PROGS/test.html:1:1

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


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

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


fSelectedIndex file:///K:/DADET/PROGS/test.html:43:9
onchange file:///K:/DADET/PROGS/test.html:1:1

Si « select » n’est pas défini pour une multisélection (avec l’attribut « muti »), et qu’on y
sélectionne quand-même plusieurs options, « selectedIndex » retournera l’index de la
dernière option sélectionnée rencontrée qui deviendra la seule option sélectionnée, et la
« value » de l’élément « select » sera naturellement aussi celle de la dernière option sé-
lectionnée. Voyons ça.

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


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

<select class=cSel size=10>


<option value="AUR">Aura</option>
<option value="AMB">Amblyopie</option>
<option value="AMR" selected=true>Amaurose</option>
<option value="CCT">Cécité Corticale</option>
<option value="SCC">Scotome Central</option>
<option value="SCS" selected="selected">Scotome Scintillant</option>
<option value="SCP">Scotome Positif</option>
<option value="SCN">Scotome Négatif</option>
<option value="PST" selected>Post-Image</option>
<option value="MCT">Migraines Cataméniales</option>
</select>

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


const s = document.querySelector(".cSel");
console.log(s.value),
console.log(
s.selectedIndex," *",
s[s.selectedIndex].value," *",
s[s.selectedIndex].textContent,
),
console.log(s.selectedOptions)
</script>

Si « select » est défini pour une multisélection (avec l’attribut « muti »), « 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.

<label>VOTRE CHOIX :<br></label>


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

<option value="nom" selected="selected">Diasoluka</option>


<option value="postnom">Luyalu</option>
<option value="planete" selected="selected">Terre</option>
<option value="etoile">Soleil</option>

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

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


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

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

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


function fSelectedIndex() {
const e = document.querySelector(".cSel");
const z = document.getElementById("tid");
for(let k=0 , l=e.length ; k<l ; k++){
if(e.options[k].selected) {
z.innerHTML+=
`${e.options[k].value} = ${e.options[k].text}\n`
}
}
z.innerHTML+="\n"
}
</script>

Exécution :

Ce qui suit est valable seulement à titre d’illustration, seulement pour le code ci-dessus.
Faites un « click [gauche] » sur la « textarea » pour afficher. Ajoutez la sélection de par
exemple « Postnom » avec « CTRL-RETOUR », puis sélectionnez seulement
« ETOILE » en cliquant dessus.

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


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

Une surcharge du code ci-dessus :

On change dynamiquement le « label » ainsi que les « value » et « text » de « select »,


et on ajoute deux nouvelles « options » avec deux méthodes différentes.

<label id="lid">VOTRE CHOIX :<br>


Click pour sélectionner<br>
Click-Droit sur Soleil = Tout Désélectionner<br></label>
<select multiple size="9" id="sel"
onClick="fSelectedIndex()">

<option value="nom" selected>Diasoluka</option>


<option value="postnom">Luyalu</option>
<option value="planete" selected=true>Terre</option>
<option value="etoile" onContextMenu='fSelectedIndex(-1);'>
Soleil=Unselect All
</option>

<!—1ère MÉTHODE D'AJOUT D'OPTION -->

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

<button id="idb">CHANGE</button>
<br><button id="ida" style="width:233">AJOUT D'OPTION & l'Event</button>
<br><textarea id="tid" style="height:320"></textarea>

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


function fSelectedIndex(p) {
const e = document.getElementById("sel");
const z = document.getElementById("tid");

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


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

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

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


function fChange() {
const e = document.getElementById("sel");
const z = document.getElementById("tid");
const l = document.getElementById("lid");
l.innerHTML='MALADIES DES YEUX<br>'

const a=[
["DR","CAT","MD","HR","XR"],
['D?collement R?tine','CATARACTE',
'Myod?sopsie','H?m?ralopie','X?rophtalmie']
];
for(let k=0 , l=e.length ; k<l ; k++){
e.options[k].text = a[0][k];
e.options[k].value= a[1][k];
}
}

let cptr=0;
document.getElementById('ida').addEventListener('click', function(e){
const s = document.getElementById("sel");

// 2? m?thode d'ajout de nvlle OPTION


s.options[s.options.length] =
new Option('New Text'+ ++cptr, 'new_value'+cptr);
// Fin ajout de nvlle OPTION

console.log("Current Select Options =",s.options);

console.log("e =",e);
console.log("e.target =",e.target);
console.log("e.button =",e.button);
console.log("e.buttons =",e.buttons);
console.log("e.clientX =",e.clientX);
console.log("e.clientY =",e.clientY);
console.log("e.ctrlKey =",e.ctrlKey);
console.log("e.defaultPrevented =",e.defaultPrevented);
console.log("e.preventDefault =",e.preventDefault);
console.log("e.layerX =",e.layerX);
console.log("e.layerY =",e.layerY);
console.log("e.movementX =",e.movementX);
console.log("e.movementY =",e.movementY);
console.log("e.offsetX =",e.offsetX);
console.log("e.offsetY =",e.offsetY);
console.log("e.pageX =",e.pageX);
console.log("e.pageY =",e.pageY);
console.log("e.rangeParent =",e.rangeParent);
console.log("e.screenX =",e.screenX);
L’élément < Select > - 74 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

console.log("e.screenY =",e.screenY);
console.log("e.shiftKey =",e.shiftKey);
console.log("e.type =",e.type);
console.log("e.view =",e.view);
console.log("e.which =",e.which);
console.log("e.x =",e.x);
}
);
document.getElementById('idb').addEventListener('click', fChange);
</script>

Exempled’exécution :

Vous pouvez à tout moment ajouter d’option en cliquant sur le bouton


« AJOUT D'OPTION & l'Event ». Mais travaillons avec les options préexistantes.

Cliquez droit dans la liste [déroulante] de sélection puis annuler avec « ESCAPE », puis
cilquez sur Etoile pour tout désélectionner (observez bien ce qui se passe).

À ce niveau on clique le « button CHANGE » :

Puis cliquez sur l’option « CAT » et frappez sur « RETOUR ».

Puis multisélectionnez avec « CLICK-GAUCHE » tout en gardant la touche « CTRL » 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 ».

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


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

À ce niveau, ajoutons une nouvelle option en tapant sur ce bouton. La nouvelle option
s’est ajoutée et la liste actualisée de l’event s’est affichée dans la fenêtre de la console.
<CTRL-Cliquons> sur cette nouvelle option, puis cliquons sur HT.

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


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

Ajout à un élément « select » d’options à partir d’un objet.

<select class="cSel"></select>
<div class="cDiv"></div>

<button class="iBut">AJOUTER L'OPTION SUIVANTE</button>

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


var o = {
"RET" : 'Rétinoblastome',
"SSC" : 'Scinchisis Scintillans',
"TRM" : 'Trou Maculaire',
"MYD" : 'Myodésopsie'
};
console.dir(o);

var s = document.querySelector(".cSel");
var d = document.querySelector(".cDiv");
var b = document.querySelector(".iBut");

let i=0, addflag=0;


let kv = Object.entries(o);
let faddopt = _ => {
if(kv[i]!=undefined) {
if (!addflag) {
console.log(kv[i][0], kv[i][1]);
s.options[s.options.length] =
L’élément < Select > - 77 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

new Option(kv[i][0], kv[i++][1]);


s.size = s.options.length;
s.selectedIndex = s.options.length - 1;
}
}
else {
if(!addflag){
addflag=1;
b.innerHTML = "DÉTRUIRE TOUTES LES OPTIONS";
console.log("=".repeat(35));
}
else {

/////////// Supprimer toutes les options en cours


/**/ while (s.options.length > 0) {
/**/ s.remove(0);
/**/ }
// ou s.options.length = null;
// ou s.options.length = undefined;
// ou s.options.length = NaN;
// ou s.options.length = "";
// ou s.options.length = 0;
/////////// Fin Suppression toutes les options en cours

b.innerHTML = "AJOUTER DE NOUVEAU L'OPTION SUIVANTE";


addflag=0, i=0;
}
}
}

let fdisp = _ => {


d.innerHTML+=s[s.selectedIndex].value +
s[s.selectedIndex].text+"<br>";
}
b.addEventListener("click",faddopt,false);
s.addEventListener("click",fdisp,false);
</script>

Cliquez sur le bouton « AJOUTER L’OPTION SUIVANTE » 4 fois :

Cliquez encore sur ce même bouton :

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


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

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

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


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

Jongler avec les « value » et « text » des « options » d’un élément « select » :

Avec « Object . entries » et « Object . values » :

<select id="iSel" size="3">


<option value="one">Un</option>
<option value="two">Deux</option>
<option value="three">Trois</option>
</select>

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


const i=document.getElementById("iSel");
for(let k=0;k<i.length;k++) {
if(k == i.selectedIndex) console.log("Selected ".repeat(3));
console.log(`${Object.entries(i.options)[k][1].value}`+
` => ` +
`${Object.entries(i.options)[k][1].innerHTML}`);
console.log(Object.values(i.options)[k].value ,
" => ",
Object.values(i.options)[k].innerHTML);
console.log("=".repeat(25));
}
</script>

Et Encore :

<select class="cS" onChange="fSel2(this.value);">


<option value="0">Sélectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>

<select id="iS1" onChange =


"fSel(options[this.selectedIndex].value);">
<option value="0">Sélectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select><br>

<select id="iS2" onChange =


L’élément < Select > - 80 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

"fSel3(options[this.selectedIndex].text);">
<option value="0">Sélectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>

<select id="iS3" onChange =


"fSel3(options[this.selectedIndex].textContent);">
<option value="0">Sélectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>

<select id="iS4" onChange =


"fSel3(options[this.selectedIndex].label);">
<option value="0">Sélectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>

<select id="iS4" onChange =


"fSel3(options[this.selectedIndex].innerHTML);">
<option value="0">Sélectionner</option>
<option value="1">Un</option>
<option value="2" selected>Deux</option>
<option value="3">Trois</option>
</select>

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


const s=document.querySelector(".cS");

// options[this.selectedIndex].value
let fSel = (sIdx) => console.log(sIdx,
s.options[sIdx].text,
s.options[sIdx].textContent, s.options[sIdx].label);

let fSel2= (sIdx) => { // this.value


console.log(
sIdx, s.options[sIdx].text,
s.options[sIdx].textContent,
s.options[sIdx].label , o[sIdx].innerHTML);
}

// options[this.selectedIndex].text
// options[this.selectedIndex].textContent
// options[this.selectedIndex].label
// options[this.selectedIndex].innerHTML
let fSel3= (sIdx) => {
console.log(sIdx);
}
</script> <!-- fSel -->

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


const x=document.querySelector(".cS"),
o=x.options, i=x.selectedIndex;
console.log(o[i].value,
o[i].text , o[i].textContent , o[i].label , o[i].innerHTML);
</script> <!-- .cS" -->

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


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

Au chargement :

Changeons les sélections :

LAPAROTOMISONS L’ÉLÉMENT « HTMLSelectElement » à la console de Firefox :

Pour exploiter au mieux et à fond cet élément HTML/DOM comme tout autre objet, il 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

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


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

Prototype de HTMLSelectElement avec Firefox :


« options », « selectedIndex » et « value » sont les attributs (propriétés) les plus utilisés.

prototype: HTMLSelectElementPrototype
add: function add()
autocomplete: Getter & Setter
autofocus: Getter & Setter
checkValidity: function checkValidity()
constructor: function ()
disabled: Getter & Setter
form: Getter
item: function item()
labels: Getter
length: Getter & Setter
multiple: Getter & Setter
name: Getter & Setter
namedItem: function namedItem()
options: Getter
remove: function remove()
reportValidity: function reportValidity()
required: Getter & Setter
selectedIndex: Getter & Setter
selectedOptions: Getter
setCustomValidity: function setCustomValidity()
size: Getter & Setter
type: Getter
validationMessage: Getter
validity: Getter
value: Getter & Setter
willValidate: Getter
Symbol(Symbol.iterator): function values()
<prototype>: HTMLElementPrototype {
click: click(), focus: focus(), blur: blur(), …
}

Prototype du constructeur de HTMLSelectElement avec Firefox :


« options », « selectedIndex » et « value » sont les attributs (propriétés) les plus utilisés.

constructor: ()
length: 0
name: "HTMLSelectElement"
prototype: HTMLSelectElementPrototype
add: function add()
autocomplete: Getter & Setter
autofocus: Getter & Setter
checkValidity: function checkValidity()
constructor: function ()
disabled: Getter & Setter
form: Getter
item: function item()
labels: Getter
length: Getter & Setter

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


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

multiple: Getter & Setter


name: Getter & Setter
namedItem: function namedItem()
options: Getter
remove: function remove()
reportValidity: function reportValidity()
required: Getter & Setter
selectedIndex: Getter & Setter
selectedOptions: Getter
setCustomValidity: function setCustomValidity()
size: Getter & Setter
type: Getter
validationMessage: Getter
validity: Getter
value: Getter & Setter
willValidate: Getter
Symbol(Symbol.iterator): function values()
<prototype>: HTMLElementPrototype {
click: click(), focus: focus(), blur: blur(), …
}
Symbol(Symbol.hasInstance): function Symbol.hasInstance()
<prototype>: function ()

Prototype du prototype du constructeur de HTMLSelectElement avec Firefox :

<prototype>: HTMLElementPrototype
accessKey: Getter & Setter
accessKeyLabel: Getter
blur: function blur()
click: function click()
constructor: function ()
contentEditable: Getter & Setter
contextMenu: Getter
dataset: Getter
dir: Getter & Setter
draggable: Getter & Setter
focus: function focus()
hidden: Getter & Setter
innerText: Getter & Setter
isContentEditable: Getter
lang: Getter & Setter
offsetHeight: Getter
offsetLeft: Getter
offsetParent: Getter
offsetTop: Getter
offsetWidth: Getter

onabort: Getter & Setter


onanimationcancel: Getter & Setter
onanimationend: Getter & Setter
onanimationiteration: Getter & Setter
onanimationstart: Getter & Setter
onauxclick: Getter & Setter
onblur: Getter & Setter
L’élément < Select > - 84 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

oncanplay: Getter & Setter


oncanplaythrough: Getter & Setter
onchange: Getter & Setter
onclick: Getter & Setter
onclose: Getter & Setter
oncontextmenu: Getter & Setter
oncopy: Getter & Setter
oncut: Getter & Setter
ondblclick: Getter & Setter
ondrag: Getter & Setter
ondragend: Getter & Setter
ondragenter: Getter & Setter
ondragexit: Getter & Setter
ondragleave: Getter & Setter
ondragover: Getter & Setter
ondragstart: Getter & Setter
ondrop: Getter & Setter
ondurationchange: Getter & Setter
onemptied: Getter & Setter
onended: Getter & Setter
onerror: Getter & Setter
onfocus: Getter & Setter
ongotpointercapture: Getter & Setter
oninput: Getter & Setter
oninvalid: Getter & Setter
onkeydown: Getter & Setter
onkeypress: Getter & Setter
onkeyup: Getter & Setter
onload: Getter & Setter
onloadeddata: Getter & Setter
onloadedmetadata: Getter & Setter
onloadend: Getter & Setter
onloadstart: Getter & Setter
onlostpointercapture: Getter & Setter
onmousedown: Getter & Setter
onmouseenter: Getter & Setter
onmouseleave: Getter & Setter
onmousemove: Getter & Setter
onmouseout: Getter & Setter
onmouseover: Getter & Setter
onmouseup: Getter & Setter
onmozfullscreenchange: Getter & Setter
onmozfullscreenerror: Getter & Setter
onpaste: Getter & Setter
onpause: Getter & Setter
onplay: Getter & Setter
onplaying: Getter & Setter
onpointercancel: Getter & Setter
onpointerdown: Getter & Setter
onpointerenter: Getter & Setter
onpointerleave: Getter & Setter
onpointermove: Getter & Setter
onpointerout: Getter & Setter
onpointerover: Getter & Setter
onpointerup: Getter & Setter
L’élément < Select > - 85 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

onprogress: Getter & Setter


onratechange: Getter & Setter
onreset: Getter & Setter
onresize: Getter & Setter
onscroll: Getter & Setter
onseeked: Getter & Setter
onseeking: Getter & Setter
onselect: Getter & Setter
onselectstart: Getter & Setter
onshow: Getter & Setter
onstalled: Getter & Setter
onsubmit: Getter & Setter
onsuspend: Getter & Setter
ontimeupdate: Getter & Setter
ontoggle: Getter & Setter
ontransitioncancel: Getter & Setter
ontransitionend: Getter & Setter
ontransitionrun: Getter & Setter
ontransitionstart: Getter & Setter
onvolumechange: Getter & Setter
onwaiting: Getter & Setter
onwebkitanimationend: Getter & Setter
onwebkitanimationiteration: Getter & Setter
onwebkitanimationstart: Getter & Setter
onwebkittransitionend: Getter & Setter
onwheel: Getter & Setter

spellcheck: Getter & Setter


style: Getter & Setter
tabIndex: Getter & Setter
title: Getter & Setter
<prototype>: ElementPrototype {
getAttributeNames: getAttributeNames(),
getAttribute: getAttribute(),
getAttributeNS: getAttributeNS(), …

<prototype>: ElementPrototype
after: function after()
animate: function animate()
append: function append()
attributes: Getter
before: function before()
childElementCount: Getter
children: Getter
classList: Getter & Setter
className: Getter & Setter
clientHeight: Getter
clientLeft: Getter
clientTop: Getter
clientWidth: Getter
closest: function closest()
constructor: function ()
firstElementChild: Getter
getAttribute: function getAttribute()
getAttributeNS: function getAttributeNS()
L’élément < Select > - 86 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

getAttributeNames: function getAttributeNames()


getAttributeNode: function getAttributeNode()
getAttributeNodeNS: function getAttributeNodeNS()
getBoundingClientRect: function getBoundingClientRect()
getClientRects: function getClientRects()
getElementsByClassName: function getElementsByClassName()
getElementsByTagName: function getElementsByTagName()
getElementsByTagNameNS: function getElementsByTagNameNS()
hasAttribute: function hasAttribute()
hasAttributeNS: function hasAttributeNS()
hasAttributes: function hasAttributes()
hasPointerCapture: function hasPointerCapture()
id: Getter & Setter
innerHTML: Getter & Setter
insertAdjacentElement: function insertAdjacentElement()
insertAdjacentHTML: function insertAdjacentHTML()
insertAdjacentText: function insertAdjacentText()
lastElementChild: Getter
localName: Getter
matches: function matches()
mozMatchesSelector: function mozMatchesSelector()
mozRequestFullScreen: function mozRequestFullScreen()
namespaceURI: Getter
nextElementSibling: Getter
outerHTML: Getter & Setter
prefix: Getter
prepend: function prepend()
previousElementSibling: Getter
querySelector: function querySelector()
querySelectorAll: function querySelectorAll()
releaseCapture: function releaseCapture()
releasePointerCapture: function releasePointerCapture()
remove: function remove()
removeAttribute: function removeAttribute()
removeAttributeNS: function removeAttributeNS()
removeAttributeNode: function removeAttributeNode()
replaceWith: function replaceWith()
requestPointerLock: function requestPointerLock()
scroll: function scroll()
scrollBy: function scrollBy()
scrollHeight: Getter
scrollIntoView: function scrollIntoView()
scrollLeft: Getter & Setter
scrollLeftMax: Getter
scrollTo: function scrollTo()
scrollTop: Getter & Setter
scrollTopMax: Getter
scrollWidth: Getter
setAttribute: function setAttribute()
setAttributeNS: function setAttributeNS()
setAttributeNode: function setAttributeNode()
setAttributeNodeNS: function setAttributeNodeNS()
setCapture: function setCapture()
setPointerCapture: function setPointerCapture()
tagName: Getter
L’élément < Select > - 87 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

webkitMatchesSelector: function webkitMatchesSelector()


Symbol(Symbol.unscopables): Object {
slot: true, before: true, after: true, …
Symbol(Symbol.unscopables): {…}
after: true
append: true
before: true
prepend: true
remove: true
replaceWith: true
slot: true
}
<prototype>: NodePrototype {
getRootNode: getRootNode(), hasChildNodes: hasChildNodes(),
insertBefore: insertBefore(), …
<prototype>: NodePrototype
ATTRIBUTE_NODE: 2
CDATA_SECTION_NODE: 4
COMMENT_NODE: 8
DOCUMENT_FRAGMENT_NODE: 11
DOCUMENT_NODE: 9
DOCUMENT_POSITION_CONTAINED_BY: 16
DOCUMENT_POSITION_CONTAINS: 8
DOCUMENT_POSITION_DISCONNECTED: 1
DOCUMENT_POSITION_FOLLOWING: 4
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32
DOCUMENT_POSITION_PRECEDING: 2
DOCUMENT_TYPE_NODE: 10
ELEMENT_NODE: 1
ENTITY_NODE: 6
ENTITY_REFERENCE_NODE: 5
NOTATION_NODE: 12
PROCESSING_INSTRUCTION_NODE: 7
TEXT_NODE: 3
appendChild: function appendChild()
baseURI: Getter
childNodes: Getter
cloneNode: function cloneNode()
compareDocumentPosition: function compareDocumentPosition()
constructor: function ()
contains: function contains()
firstChild: Getter
getRootNode: function getRootNode()
hasChildNodes: function hasChildNodes()
insertBefore: function insertBefore()
isConnected: Getter
isDefaultNamespace: function isDefaultNamespace()
isEqualNode: function isEqualNode()
isSameNode: function isSameNode()
lastChild: Getter
lookupNamespaceURI: function lookupNamespaceURI()
lookupPrefix: function lookupPrefix()
nextSibling: Getter
nodeName: Getter
nodeType: Getter
L’élément < Select > - 88 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

nodeValue: Getter & Setter


normalize: function normalize()
ownerDocument: Getter
parentElement: Getter
parentNode: Getter
previousSibling: Getter
removeChild: function removeChild()
replaceChild: function replaceChild()
textContent: Getter & Setter
<prototype>: EventTargetPrototype {
addEventListener: addEventListener(),
removeEventListener: removeEventListener(),
dispatchEvent: dispatchEvent(), …
}
}
}

Symboles de HTMLSelectElement :

Symbol(Symbol.hasInstance): Symbol.hasInstance()
length: 1
name: "[Symbol.hasInstance]"
<prototype>: function ()
<prototype>: ()
apply: function apply()
arguments: null
bind: function bind()
call: function call()
caller: null
constructor: function Function()
constructor: Function()
length: 1
name: "Function"
prototype: function ()
prototype: ()
apply: function apply()
arguments: null
bind: function bind()
call: function call()
caller: null
constructor: function Function()
length: 0
name: ""
toSource: function toSource()
toString: function toString()
Symbol(Symbol.hasInstance):
function Symbol.hasInstance()
<prototype>: Object { … }
<prototype>: function ()
<prototype>: ()
apply: function apply()
arguments: null
bind: function bind()
call: function call()
L’élément < Select > - 89 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

caller: null
constructor: function Function()
length: 0
name: ""
toSource: function toSource()
toString: function toString()
Symbol(Symbol.hasInstance):
function Symbol.hasInstance()
<prototype>: Object { … }
length: 0
name: ""
length: 0
name: ""
toSource: function toSource()
toString: function toString()
Symbol(Symbol.hasInstance): function Symbol.hasInstance()
<prototype>: Object { … }

Prototype du prototype de HTMLSelectElement :

<prototype>: ()
length: 0
name: "HTMLElement"
prototype: HTMLElementPrototype {
click: click(), focus: focus(), blur: blur(), …
}
Symbol(Symbol.hasInstance): function Symbol.hasInstance()
<prototype>: function ()
<prototype>: ()
ATTRIBUTE_NODE: 2
CDATA_SECTION_NODE: 4
COMMENT_NODE: 8
DOCUMENT_FRAGMENT_NODE: 11
DOCUMENT_NODE: 9
DOCUMENT_POSITION_CONTAINED_BY: 16
DOCUMENT_POSITION_CONTAINS: 8
DOCUMENT_POSITION_DISCONNECTED: 1
DOCUMENT_POSITION_FOLLOWING: 4
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32
DOCUMENT_POSITION_PRECEDING: 2
DOCUMENT_TYPE_NODE: 10
ELEMENT_NODE: 1
ENTITY_NODE: 6
ENTITY_REFERENCE_NODE: 5
NOTATION_NODE: 12
PROCESSING_INSTRUCTION_NODE: 7
TEXT_NODE: 3
length: 0
name: "Node"
prototype: NodePrototype {
L’élément < Select > - 90 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

getRootNode: getRootNode(), hasChildNodes: hasChildNodes(),


insertBefore: insertBefore(), …
}
Symbol(Symbol.hasInstance): function Symbol.hasInstance()
<prototype>: function ()

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


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

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
L’élément < Select > - 92 / 93 - lundi, 11. mars 2019 (8:41 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV

• https://www.scribd.com/document/375024162/Fonctions-Imbriquees-en-JS
• https://www.scribd.com/document/374789297/Format-Interne-Des-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’élément < Select > - 93 / 93 - lundi, 11. mars 2019 (8:41 )