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

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

4 Cartes mariam kasouh

aaaaaaaaaaaaaaaa

4 Cartes Beniani Ilyes

découpe grammaticale

0 Cartes Beniani Ilyes

TEST

2 Cartes Enrico Valle

relation publique

2 Cartes djouad hanane

Créer des cartes mémoire