Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript (re)-positionnement d'un select

(re)-positionnement d'un select

2 réponses
Avatar
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)
Signaler un problème avec ce contenu

2 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
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
Avatar
unbewusst.sein
SAM wrote:

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)