(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)
Questions / Réponses high-tech
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #23589641
Le 21/07/11 10:36, Une Bévue a écrit :
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 :



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)

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"



oui, normal, mais seulement au load de la page ou sans avoir fait
d'autre choix (manuel ?) dans la liste déroulante.

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



(*) 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)

pourtant :
alert(form.cat.selectedIndex + " => " +
form.cat.options[form.cat.selectedIndex].value + " => " +
form.cat.options[form.cat.selectedIndex].innerHTML);



ici en JS de nos grand' mère c'est :
form.cat.options[form.cat.selectedIndex].text;

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 ?



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>

Aussi y a t'il un moyen autre que "innerHTML" pour obtenir le teste de
l'option sélectionnée ???



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
unbewusst.sein
Le #23589731
SAM
Le 21/07/11 10:36, Une Bévue a écrit :
> 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 :

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)

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

oui, normal, mais seulement au load de la page ou sans avoir fait
d'autre choix (manuel ?) dans la liste déroulante.

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

(*) 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)

> pourtant :
> alert(form.cat.selectedIndex + " => " +
> form.cat.options[form.cat.selectedIndex].value + " => " +
> form.cat.options[form.cat.selectedIndex].innerHTML);

ici en JS de nos grand' mère c'est :
form.cat.options[form.cat.selectedIndex].text;

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

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>

> Aussi y a t'il un moyen autre que "innerHTML" pour obtenir le teste de
> l'option sélectionnée ???

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)
Publicité
Poster une réponse
Anonyme