(re)-positionnement d'un select
Le
unbewusst.sein
J'ai un select dans une form :
<form id='form' action='#' onsubmit="return do_it();">
[]
<select id='cat' name='cat'>
<option value='-1'>Tout</option>
<option value='0'>Formulaires</option>
<option value='1'>Groupes de discussion</option>
<option value='2'>Comptes EMail</option>
<option value='3'>Clés de logiciels</option>
<option value='4'>Banque en ligne</option>
<option value='5'>Cartes de paiement</option>
</select>
[]
</form>
avec JS je souhaite, dans ma function do_it() reposionner le select à la
valeur choisie par l'utilisateur :
var form=document.getElementById('form');
si je fais :
form.cat.selectedIndex=3;
j'ai bien toujours "Comptes EMail";
si je ne fais rien, j'ai tjs "Tout"
par contre si je fais :
form.cat.selectedIndex=form.cat.selectedIndex;
ça me donne "Tout" aussi et non pas la dernière valeur sélectionnée
pourtant :
alert(form.cat.selectedIndex + " => " +
form.cat.options[form.cat.selectedIndex].value + " => " +
form.cat.options[form.cat.selectedIndex].innerHTML);
AVANt le "form.cat.selectedIndex=form.cat.selectedIndex;" me donne la
bonne valeur
J'ai l'impression, que le select se positionne très vite à la bonne
valeur et revient quasi instantanément sur "Tout', càd selectedIndex =
0
Comment éviter ça ?
Aussi y a t'il un moyen autre que "innerHTML" pour obtenir le teste de
l'option sélectionnée ???
--
« Qui prête à rire, n'est pas sûr d'être remboursé. »
(Raymond Devos)
<form id='form' action='#' onsubmit="return do_it();">
[]
<select id='cat' name='cat'>
<option value='-1'>Tout</option>
<option value='0'>Formulaires</option>
<option value='1'>Groupes de discussion</option>
<option value='2'>Comptes EMail</option>
<option value='3'>Clés de logiciels</option>
<option value='4'>Banque en ligne</option>
<option value='5'>Cartes de paiement</option>
</select>
[]
</form>
avec JS je souhaite, dans ma function do_it() reposionner le select à la
valeur choisie par l'utilisateur :
var form=document.getElementById('form');
si je fais :
form.cat.selectedIndex=3;
j'ai bien toujours "Comptes EMail";
si je ne fais rien, j'ai tjs "Tout"
par contre si je fais :
form.cat.selectedIndex=form.cat.selectedIndex;
ça me donne "Tout" aussi et non pas la dernière valeur sélectionnée
pourtant :
alert(form.cat.selectedIndex + " => " +
form.cat.options[form.cat.selectedIndex].value + " => " +
form.cat.options[form.cat.selectedIndex].innerHTML);
AVANt le "form.cat.selectedIndex=form.cat.selectedIndex;" me donne la
bonne valeur
J'ai l'impression, que le select se positionne très vite à la bonne
valeur et revient quasi instantanément sur "Tout', càd selectedIndex =
0
Comment éviter ça ?
Aussi y a t'il un moyen autre que "innerHTML" pour obtenir le teste de
l'option sélectionnée ???
--
« Qui prête à rire, n'est pas sûr d'être remboursé. »
(Raymond Devos)
là, faudrait d'abord stocker la position de l'utilisateur
puis bricoler
puis revenir à ce choix
(sinon si tt de suite après changement, je vois pas à quoi ça sert)
oui, normal, mais seulement au load de la page ou sans avoir fait
d'autre choix (manuel ?) dans la liste déroulante.
(*) voir tt en bas
faut le faire sur le onchange ou, à tout le moins, sur le mouseup
(attribut de balise select)
et, si ça marche touj pô :
onchange="setTimeout(function() {
this.selectedIndex = this.selectedIndex;
alert( this.selectedIndex );
}, 0);"
ou mieux :
onchange="setTimeout(function() {
var s = document.getElementById('form').cat;
s.selectedIndex = s.selectedIndex;
alert( s.selectedIndex );
}, 0);"
la temporisation à zéro doit suffire
(pour expliquer au navigateur d'agir après)
ici en JS de nos grand' mère c'est :
form.cat.options[form.cat.selectedIndex].text;
Je n'arrive pas à reproduire ce que tu décris
(en xhtml 1 strict pour Fx)
(en html5 pour Safari)
<script type="text/javascript" charset="utf-8">
function do_it() {
var s = document.getElementById('form').cat.options;
s.selectedIndex = s.selectedIndex;
alert('selection = '+s.selectedIndex + ' : '+
s[s.selectedIndex].text + ' / ' + s[s.selectedIndex].value);
return false;
}
</script>
</head>
<body>
<form id='form' action='#' onsubmit="return do_it();">
<select id='cat' name='cat' onchange="do_it()">
<option value='-1'>Tout</option>
<option value='0'>Formulaires</option>
<option value='1'>Groupes de discussion</option>
<option value='2'>Comptes EMail</option>
<option value='3'>Clés de logiciels</option>
<option value='4'>Banque en ligne</option>
<option value='5'>Cartes de paiement</option>
</select>
<input type="submit" />
</form>
cf + haut.
var s = form.cat.options;
alert(s[1].text + ' => ' + s[1].value); // Formulaires => 0
//// pour création d'option : new Option(text, value) ////
// ajout d'un choix à la fin du sélecteur (menu déroulant) :
var o = new Option('Yvon', 'geek');
form.cat.options[form.cat.length] = o;
// ou directement :
form.cat.options[form.cat.length] = new Option('Yvon', 'geek');
exercice :
=========
var selection = [ ['Tout',-1],['Formulaires',0],
['Groupes de discussion',1], ['Comptes EMail',2],
['Clés de logiciels',3],
['Banque en ligne',4], ['Cartes de paiement',5] ],
n = selection.length,
s = form.cat.options;
// on vide le select
s.length = 0;
// on le re-remplit à l'envers :
while(n--) s[s.length] = new Option(selection[n][0],selection[n][1]);
(*)
à tous coups le form se recharge (et revient en 'par défaut')
tu as oublié le
return false;
en fin de fonction do_it()
--
Stéphane Moriaux avec/with iMac-intel
bon, merci bien, je regarderai tout ça cette aprems'
--
« Qui prête à rire, n'est pas sûr d'être remboursé. »
(Raymond Devos)