Discussion :

[billbao1987]

Bonjour, je réalise un script utilisant [GD] pour transformer un texte en image avec mise en page du texte plus quelques ajouts grâçe aux [regex]. Vous pouvez avoir un aperçu ici ( passez en mode :lisible).

Mon interfaçe utilisateur ( un formulaire) propose un <select> permettant de choisir le format d'image que va générer [GD]. plus loin je propose à l'utilisateur de choisir la hauteur de colonne de texte qu'il désire dans un autre <select>.

De façon à orienter le choix de l'utilisateur vers une hauteur de colonne en rapport avec la hauteur de l'image qu'il a choisi, j'aimerais pouvoir changer l'option selected="selected" du deuxième <select>, ceci en fonction de l'option selectionné par l'utilisateur dans le premier <select>

J'ai trouvé un tutoriel qui propose de super choses en matière de formulaire dynamique ( Changer le marqueur value des <option>,supprimer, ajouter un <option>, le faire remonter dans la liste ...

.. Helas, je ne trouve pas la fonction pour changer le marqueur selected du <option> . Changer dynamiquement ce marqueur depuis un premier <select> me permettrait de guider l'utilisateur vers des choix de mise en page logique ( éviter le texte en hors cadre )

Je pourrais très faire en php avec un switch en fonction de la valeur du premier <select> puis faire un echo "selected" au milieu du <option> visé dans le deuxième <select>, mais le but est que la modification se fasse "onChange", donc sans recharger la page ..

Avis aux initiés

[E.Bzz]

Bonjour,

.. Helas, je ne trouve pas la fonction pour changer le marqueur selected du <option> .

Et pourtant ...

A+

[billbao1987]

et en effet, ça existe ! Je découvre ces fonctions javascript en ce jour ( document.forms [] ... ) résultat, j'ai un peu manqué de suite dans les idées ne conaissant pas les syntaxes

mais en ayant un peu bidouillé,.. à la ça marche pas .. mais ça ça marche.. alors, si on fait ça .. ben ça marche !

je donne la sourçe de mon fichier test si jamais d'autres non initiés passent par là .. Attention ! Ca fonctionne avec onClick, mais pas avec onFocus et onChange !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<form action="xxxxxxx.php " name="form" id="form" method="post">
  Image height:
    <select name="y">
          <!-- <option value="600">600</option>-->
          <option value="1200" onClick="javascript:change_col_height_max_selected_to_1000()" >1200</option>
          <option value="1800" onClick="javascript:change_col_height_max_selected_to()">1800</option>
          <option value="2400" onClick="javascript:change_col_height_max_selected_to_2200()">2400</option>
 
 
        </select>
<br><br><br><br>
Cols height :   
<select name="col_height_max" id="col_height_max" >
  <option value="1000">1000</option>
  <option value="1600">1600</option>
  <option value="2200">2200</option>
</select>
<br />
<!-- <input type="text" name="texte_test" value="Valeur initiale"  />
<INPUT type="button" value="Changer la zone de texte"
onClick=' document.forms["form"].elements["texte_test"].value = "NOUVEAU" '>
 -->
</form>
 
<script language="javascript">
function change_col_height_max_selected_to(){
document.forms["form"].col_height_max.options[1].selected = true;
}
 
function change_col_height_max_selected_to_1000(){
document.forms["form"].col_height_max.options[0].selected = true;
}
 
function change_col_height_max_selected_to_2200(){
document.forms["form"].col_height_max.options[2].selected = true;
}
 
 
</script>

un aperçu de ce que ça donne ici:
http://billbao1987.free.fr/gd/select...mique_test.php

Une amélioration possible serait de n'avoir qu'une seule fonction et de faire passer le "value" du <option> ciblé en variable.. mais ça je sais aps encore faire.. Avis aux contributeurs! Merci à toi E.Bzzz

[E.Bzz]

Oui, effectivement, tu peux simplifier.
Par exemple passer l'indice de la ligne à sélectionner en paramètre.
Comme ça il n'y a plus besoin que d'une seule fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function change_col_height_max_selected_to(val){
document.forms["form"].elements["col_height_max"].options[val].selected = true;
}

Tu pourras ainsi appeler la même fonction dans toutes les options, en modifiant uniquement le paramètre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="change_col_height_max_selected_to(1)"

Par contre :

• pas de "javascript:" dans le code des évènements (c'est toujours du javascript)
• les fonctions se déclarent dans la partie <head> de la page
• les propriétés HTML s'écrivent en minuscules (ici onclick)
• onchange serait plus approprié que onclick

A+