[DOM] Selected ! Comment définir un choix pour une liste déroulante

Version imprimable

Bonjour, :)
Je cherche à savoir comment on définit (comment forcer) le choix d'une liste déroulante.
A ma connaissance il faut mettre un selected au niveau de la balise option. On est d'accord.
J'ai lu ce tuto du site.

Pour être plus explicite. Soit le début d'une liste. Je souhaite rajouter via du javascript un selected pour la valeur 5 par exemple (Adria 1002) par exemple.
Code:

1 2 3 4 5 6 7 8 9 10 11 <select id="model_bateau1" name="model_bateau1"> <option value="0">not specified</option> <option value="1">Absolu 50</option> <option value="2">ACM Dynasty 43</option> <option value="3">ACM Elite 31</option> <option value="4">ACM Excellence 38</option> <option value="5">Adria 1002</option> <option value="6">Afri-Cat 420</option> <option value="7">Airon 277</option> </select>
Comment fait-on ?

Pour mieux comprendre ma question : voici ma page de test
Si vous selectionnez (par exemple) dans la première liste déroulante (provider) le choix loueur de bateaux indépendant, vous avez en bas dans le tableau rose Bavaria 34 qui apparait. Vous avez du même avoir un alert pour vous donner sa valeur. le problème c'est qu'en faisant affiche code source ou en utilisant plus simplement firebug, il n'y a nulle part de selected devant ma valeur 33.

Et c'est grave ... :colere2: Comment fait-on pour mettre un selected ?

Par avance merci pour votre aide.

29/05/2008, 09h30
E.Bzz

Bonjour,

Citation:

Envoyé par tavarlindar

Pour être plus explicite. Soit le début d'une liste. Je souhaite rajouter via du javascript un selected pour la valeur 5 par exemple (Adria 1002) par exemple.

Code:

document.getElementById('model_bateau1').options.selectedIndex = 5;

/!\ Le 5 ne correspond pas à la value, mais au n° d'ordre de l'option dans la liste (en partant de 0).

Pour info : le code HTML n'est pas modifié par le code JS. En faisant afficher le code source de la page, tu verras toujours le code HTML initialement chargé.

=> pas de "selected" à attendre dans le tag de l'option 5 ;)

A+

y'a ça aussi mais peut etre que c'est pas se que tu cherche...

Code:

1
2
3
4
5
6
7
8
9
10
<select id="model_bateau1"  name="model_bateau1">
<option value="0">not specified</option>
<option value="1">Absolu 50</option>
<option value="2">ACM Dynasty 43</option>
<option value="3">ACM Elite 31</option>
<option value="4">ACM Excellence 38</option>
<option value="5" selected>Adria 1002</option>
<option value="6">Afri-Cat 420</option>
<option value="7">Airon 277</option>
</select>

29/05/2008, 10h09
Matthieu2000

Citation:

Envoyé par E.Bzz

Pour info : le code HTML n'est pas modifié par le code JS. En faisant afficher le code source de la page, tu verras toujours le code HTML initialement chargé.

sous firebug on voit les changements! avec l'onglet dom, on peut trouver le "selectedIndex"
29/05/2008, 10h14
E.Bzz

Citation:

Envoyé par Matthieu2000

sous firebug on voit les changements!

Exact : je parlais de l'affichage "classique" du code source ...

A+
29/05/2008, 11h52
tavarlindar

Ok merci pour votre aide.
J'ai procédé autrement.
29/05/2008, 11h57
E.Bzz

Citation:

Envoyé par tavarlindar

J'ai procédé autrement.

Pour sélectionner une option dans une liste ? :koi:
29/05/2008, 12h07
tavarlindar

réponse sur un nouveau post car la problèmatique est différente