Il y a actuellement 395 visiteurs
Jeudi 25 Avril 2024
accueilactualitésdossierscomparer les prixtélécharger gratuitement vos logicielsoffres d'emploiforum informatique
Connexion
Créer un compte

Javascript: lien avec une dropdown box

Besoin d'aide pour configurer un serveur ? Vous souhaitez obtenir des conseils pour référencer votre site ? Un petit souci pour accéder à votre FTP ? Des soucis de programmation en PHP / ASP / HTML / XHTML / XML / XSLT / CSS / ReactJS / AngularJS / VueJS / CGI / PERL / C / MySQL / PostgreSQL ??? Nous avons peut-être la solution dans ce forum ...
Répondre

Javascript: lien avec une dropdown box

Message le 16 Fév 2010 20:50

Bonjour,
Je suis débutant en javascript et j ai besoin d aide pour lier mon drop down a une fonction qui ecrit du texte

Code: Tout sélectionner
<HTML>
<HEAD>
<script type="text/javascript">
var Matrice=new Array();
Matrice[0]="value1";
var Matrix=new Array();
Matrix[0]="value2";
</script>
</HEAD>
<BODY>
<FORM name="form1">
<SELECT name="select1">
<OPTION>Matrice
<OPTION>Matrix
</SELECT>
<INPUT type="button" name="go" Value= "Go!" onclick="remplace dans le code en bas ??? par Matrice ou Matrix">
</FORM>
 
<script type="text/javascript">
document.write(???[0]);
</script>
</BODY>
</HTML>


En gros un drop down, un bouton, si on appuie sur le bouton cela determine la valeur ??? pour mettre dans
Code: Tout sélectionner
document.write(???[0]);


Merci
J_help
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 22
Inscription: 05 Oct 2009 22:06
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 16 Fév 2010 23:39

Salut !

Déjà tes balises OPTION ne sont pas fermées et n'ont pas de valeur, et cette valeur doit être affichée par javascript, comme ceci par exemple :
Code: Tout sélectionner
<SELECT name="select1">
<script type='text/javascript'>
document.write("<OPTION value='"+Matrice[0]+"'>Matrice</OPTION>");
document.write("<OPTION value='"+Matrix[0]+"'>Matrix</OPTION>");
</script>
</SELECT>


ensuite si j'ai bien compris tu veux écrire le résultat plus bas dans la page dès que le bouton est cliqué, il faut donc préparer un endroit où afficher cette réponse. En effet, tu ne peux pas l'afficher dès le chargement de la page, elle ne sera connue qu'après le clic. Donc on y écrit seulement "&nbsp" (rien). Ça donnerait par exemple un conteneur <span> nommé (ou plutôt identifié) "resultat" comme celui-ci:

Code: Tout sélectionner
<SPAN id="resultat">&nbsp;</SPAN>

(cette ligne peut se trouver à n'importe quel endroit du body de ta page et sera invisible avant le clic sur Go)

et enfin le bouton doit changer le contenu de "resultat" en lui donnant la valeur du select :
Code: Tout sélectionner
<INPUT type="button" name="go" Value= "Go!" onclick="document.getElementById('resultat').innerHTML = this.form.select1.value;">


innerHTML désigne le contenu du paragraphe 'resultat', si tu voulais afficher la réponse dans un champs de type 'input' nommé 'result' de ton formulaire, ça ferait "document.this.form.result.value=..."
Ce ne sont que des propositions, il existe des centaines de façons de faire, et ce n'est peut-être pas la plus simple.
Avatar de l'utilisateur
gael49
Expert(e)
Expert(e)
 
Messages: 1935
Inscription: 07 Sep 2004 20:11
Localisation: Les Mauges
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 17 Fév 2010 15:06

Merci beaucoup !
J ai toutefois une question.

Si j ai bien compris le code, je peux choisir une valeur d une array et une seule
Code: Tout sélectionner
OPTION value='"+Matrice[0]+"'>Matrice</OPTION>

et afficher cette valeur plus loin.

Mon but final est en fait de pouvoir afficher toutes les valeurs de l array (environ une 50aine) a des endroits differents de la page (differentes cases d un tableau).

Est ce que je peux avoir une 50aine de "onclick" dans le meme INPUT ? (ca me derange pas de faire du code "sale" pour le moment j optimiserai plus tard)

Comment faire pour selectionner la matrice entiere dans l'OPTION et ensuite redispatcher les valeurs.

En gros je veux faire ca:
Code: Tout sélectionner
var MATRICE=["valeur1","valeur2",...,"valeur50"];
var MATRIX=["valeur1","valeur2",...,"valeur50"];

<SELECT name="select1">
<script type='text/javascript'>
document.write("<OPTION value='"MATRICE"'>Matrice</OPTION>");
document.write("<OPTION value='"MATRIX"'>Matrix</OPTION>");
</script>
</SELECT>

<INPUT type="button" name="go" Value= "Go!"
onclick="document.getElementById('resultat1').innerHTML = this.form.select1.value[1];"
onclick="document.getElementById('resultat2').innerHTML = this.form.select1.value[2];"
(...)
onclick="document.getElementById('resultat50').innerHTML = this.form.select1.value[50];"
>

<SPAN id="resultat1">&nbsp;</SPAN>
<SPAN id="resultat2">&nbsp;</SPAN>
(...)
<SPAN id="resultat50">&nbsp;</SPAN>


Merci encore !
J_help
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 22
Inscription: 05 Oct 2009 22:06
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 17 Fév 2010 17:33

J ai tenté ca mais ca marche pas.

Code: Tout sélectionner
<HTML>
<HEAD>

<script type="text/javascript">
var Matrice=new Array();
Matrice[0]="value matrice 1";
Matrice[1]="value matrice 2";
var Matrix=new Array();
Matrix[0]="value matrix 1";
Matrix[1]="value matrix 2";
</script>

<script type="text/javascript">
function afficher(variable1)
document.getElementById('ici').innerHTML = variable1[0];
document.getElementById('la').innerHTML =varaible1[1];
</script>

</HEAD>
<BODY>

<FORM name="form1">
<SELECT name="select1">
<OPTION >&nbsp;</OPTION >
<OPTION value="MATRICE">Matrice</OPTION >
<OPTION value="MATRIX">Matrix</OPTION >
</SELECT>
<INPUT type="button" name="go" Value= "Go!" onclick="afficher(document.form1.select1.option[document.form1.select1.selectedIndex].value)">
</FORM>

<p>Text: <br>
<SPAN id="ici">&nbsp;</SPAN><br>
<SPAN id="la">&nbsp;</SPAN><br>
</p>

</BODY>
</HTML>
J_help
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 22
Inscription: 05 Oct 2009 22:06
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 17 Fév 2010 21:25

Ok, c'est assez étrange de vouloir faire ça avec Javascript, ce serait vraiment plus simple et plus logique avec une table Mysql et du code PHP par exemple. Mais bon si tu ne peux pas faire autrement, je pense qu'il faudrait faire une fonction Javascript qui prendrait en paramètre la valeur du select (matrice ou matrix), en fonction de cette variable tu initialises le tableau correspondant et dans une boucle FOR tu lis chaque valeur du tableau et tu crée des cellules dans la table html.

Code: Tout sélectionner
function Nom_Fonction(tab) {
 if(tab = "matrice") {
   var tableau =["valeur1","valeur2",...,"valeur50"];
 }
 else if(tab = "matrix") {
   var tableau =["valeura","valeurb",...,"valeurz"];
 }

 for(value in tableau)
 {
   document.getElementById('table_resultats').innerHTML =document.getElementById('table_resultats').innerHTML +  "<tr><td>" + tableau[value] + "</td></tr>";
 }
}

.....
.....
onclick = "javascript:Nom_Fonction(this.form.select1.value);"
.....
.....
<TABLE id="table_resultats">
&nbsp;
</TABLE>



PS : Tu ne peux pas mettre plusieurs onclick à la suite, mais rien ne t'empêche d'enchaîner plusieurs instructions dans un unique onclick (en les séparant d'un point-virgule).
Avatar de l'utilisateur
gael49
Expert(e)
Expert(e)
 
Messages: 1935
Inscription: 07 Sep 2004 20:11
Localisation: Les Mauges
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 18 Fév 2010 19:51

MERCI !
Je sais que c est pas tres malin de faire ca par javascript, mais ca me parle un peu plus que du php (et j ai pas envie de me lancer la dedans maintenant).
Merci encore !
J_help
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 22
Inscription: 05 Oct 2009 22:06
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 18 Fév 2010 19:58

Code: Tout sélectionner
for(value in tableau)


C est une vraie fonction ça le value in tableau ? ou c est a moi d apater et d ecrire "en dur" dans le FOR la taille du tableau ?
J_help
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 22
Inscription: 05 Oct 2009 22:06
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 19 Fév 2010 15:05

J_help a écrit:
Code: Tout sélectionner
for(value in tableau)


C est une vraie fonction ça le value in tableau ? ou c est a moi d apater et d ecrire "en dur" dans le FOR la taille du tableau ?


Non en fait le "value" c'est juste le nom de la variable qui va contenir la valeur courante lue dans le tableau "tableau", j'aurais pu écrire :

for(machin in tableau_de_trucs)

Au premier tour de boucle, machin est égal à tableau_de_trucs[1], au 2nd tour , machin est égal à tableau_de_trucs[2] et ainsi de suite...

Par contre je me suis planté dans le message précédent, il ne faut pas afficher "tableau[value]" mais juste "value", on mettrait tableau[value] pour un tableau multidimensionnel.

Donc ça fait :

Code: Tout sélectionner
for(value in tableau)
{
   document.getElementById('table_resultats').innerHTML =document.getElementById('table_resultats').innerHTML +  "<tr><td>" + value + "</td></tr>";
}


Il y aura autant de tours du FOR (donc autant de lignes dans la table) que de valeurs dans ton tableau "matrix" ou "matrice".
Avatar de l'utilisateur
gael49
Expert(e)
Expert(e)
 
Messages: 1935
Inscription: 07 Sep 2004 20:11
Localisation: Les Mauges
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 22 Fév 2010 21:10

Encore Merci !
J_help
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 22
Inscription: 05 Oct 2009 22:06
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 23 Fév 2010 01:05

J_help a écrit:Encore Merci !


De rien, ça fonctionne ? Si t'as le temps plus tard, essaye le PHP c'est simple à apprendre et ça permet de faire ce genre de choses et beaucoup d'autres plus facilement.
Avatar de l'utilisateur
gael49
Expert(e)
Expert(e)
 
Messages: 1935
Inscription: 07 Sep 2004 20:11
Localisation: Les Mauges
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 23 Fév 2010 17:55

En fait j'essaie de glaner des infos a droites a gauche en gardant un truc assez simple et de faire un truc par moi meme en glanant des infos a droite a gauche (parce que c est comme ça qu on apprend).

Donc en fait dans un premier tamps le tableau va pas etre cree dynamiquement mais juste rempli (ca sera le step 2 pour la creation dynamique mais un probleme a la fois).

Et vous allez peut etre trouver que j'abuse a pas suivre exactement vos conseils mais je suis toujours en train d apprendre et du coup c est plus pedagogique pour moi
Merci de votre patience.

Donc la j en suis toujours a "ca marche pas" et "je comprends pas dans ma tete ca marche"

Code: Tout sélectionner
<html>
<head>
<script type="text/javascript" src="Competition/Aircraft.js"></script>
<script type="text/javascript">
function selectAvion(avion)
{
   document.getElementById("prop1_1").innerhtml = Aircraft[avion];
}
</script>
</style>
</head>
<body>

<FORM name="form1">
<SELECT name="select1" id="selectavion1">
<OPTION value="0">&nbsp;</OPTION>
<OPTION value="1">ARJ21-700</OPTION>
<OPTION value="2">ARJ21-700 ER</OPTION>
</SELECT>
<INPUT type="button" name="go" Value= "Go!" onclick="selectAvion(document.form1.select1.option[document.form1.select1.selectedIndex].value)">
</FORM>
<table>
<tr>
  <td id="prop1_1"></td>
</tr>
</table>
</body>
</html>


Avec le Aircraft.js suivant
Code: Tout sélectionner
var Aircraft=["nspb;","ARJ21-700","ARJ21-700 ER"];


En gros quand l utilisateur clique sur le bouton, ca devrait aller chercher la ligne selectionnee dans la dropbox, recuperer le n* de la ligne et aller chercher l element avec le meme numero dans l array, et afficher le nom qui s y trouve.

Merci !
J_help
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 22
Inscription: 05 Oct 2009 22:06
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 23 Fév 2010 20:09

Salut,

Déjà je te conseille d'installer la barre webdevelopper de Firefox : https://addons.mozilla.org/fr/firefox/addon/60
C'est indispensable pour débugger 1 page web sans se casser trop la tête.

La première erreur que j'ai vu c'est dans ton onclick, il faut mettre :
Code: Tout sélectionner
selectAvion(this.form.select1.value)
ou :
Code: Tout sélectionner
selectAvion(document.form1.select1.options.selectedIndex)
au lieu de :
selectAvion(document.form1.select1.option[document.form1.select1.selectedIndex].value)


Ensuite quand tu déclares ton tableau avec "var", il s'agit d'une variable locale, donc inconnue de la fonction selectAvion, il suffit d'enlever le "var" pour que "Aircraft" devienne une variable globale.

Enfin, tu avais mis innerhtml, l'orthographe correcte est innerHTML, sinon ça marche pas...

Et moins grave, tu as mis "nbsp;" en première valeur de ton tableau, ça va afficher "nbsp;", il faut écrire "&nbsp;" pour que rien ne soit affiché.


+ d'infos sur les variables JS et leur portée :
http://www.commentcamarche.net/contents ... jsvar.php3


Code: Tout sélectionner
    <html>
    <head>
    <script type="text/javascript">   
   Aircraft=["&nbsp;","ARJ21-700","ARJ21-700 ER"];

    function selectAvion(avion)
    {
   
       document.getElementById("prop1_1").innerHTML = Aircraft[avion];

    }
    </script>
    </style>
    </head>
    <body>

    <FORM name="form1">
    <SELECT name="select1" id="selectavion1">
    <OPTION value="0">&nbsp;</OPTION>
    <OPTION value="1">ARJ21-700</OPTION>
    <OPTION value="2">ARJ21-700 ER</OPTION>
    </SELECT>
    <INPUT type="button" name="go" Value= "Go!" onclick="selectAvion(document.form1.select1.options.selectedIndex)">

    </FORM>
    <table>
    <tr>
      <td id="prop1_1"></td>
    </tr>
    </table>
    </body>
    </html>
Avatar de l'utilisateur
gael49
Expert(e)
Expert(e)
 
Messages: 1935
Inscription: 07 Sep 2004 20:11
Localisation: Les Mauges
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 23 Fév 2010 23:40

Merci !
Je crois que j ai a peu pres compris le coup de la variable globale et locale,mais je comprends pas pourquoi si j enleve le
Code: Tout sélectionner
var
dans mon fichier externe, ca marche pas meme si ma variable du coup devient globale elle devrait etre utilisee dans tout le script non ?

Code: Tout sélectionner
<script type="text/javascript">
Aircraft=["&nbsp;","ARJ21-700","ARJ21-700 ER"];
function {...}

est pas equivalent à
Code: Tout sélectionner
<script type="text/javascript" src="Competition/aircraft.js">
function {...}
???

Ce que je comprends pas c est pourquoi
Code: Tout sélectionner
onclick="selectAvion(document.form1.select1.options[document.form1.select1.selectedIndex].value)">

c est pas correct.

Dans un autre code j ai
Code: Tout sélectionner
<OPTION value="aircraft/72500.htm">ATR 72-500</OPTION>
</SELECT>
<INPUT type="button" name="go" value="Go!" onclick="window.location=document.form3.selec3.options[document.form3.select3.selectedIndex].value">
</FORM>

et ça marche tres bien - je vois pas trop la difference puisque dans les deux cas on cherche a recuperer la value du texte selectionné...
J_help
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 22
Inscription: 05 Oct 2009 22:06
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 24 Fév 2010 08:12

ça fonctionne avec le fichier externe si tu fais comme ça :
Code: Tout sélectionner
        <script type="text/javascript" src="Competition/Aircraft.js"></script>
        <script type="text/javascript">   

        function selectAvion(avion)
........</script>


J_help a écrit:Dans un autre code j ai
Code: Tout sélectionner
<OPTION value="aircraft/72500.htm">ATR 72-500</OPTION>
</SELECT>
<INPUT type="button" name="go" value="Go!" onclick="window.location=document.form3.selec3.options[document.form3.select3.selectedIndex].value">
</FORM>

et ça marche tres bien - je vois pas trop la difference puisque dans les deux cas on cherche a recuperer la value du texte selectionné...


je saurais pas te dire pourquoi ça ne fonctionne pas, mais vu que ça me paraît plus compliqué que ma façon de faire, j'ai pas trop cherché.
Avatar de l'utilisateur
gael49
Expert(e)
Expert(e)
 
Messages: 1935
Inscription: 07 Sep 2004 20:11
Localisation: Les Mauges
 
Haut

Re: Javascript: lien avec une dropdown box

Message le 24 Fév 2010 15:14

Merci pour Tout !
J_help
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 22
Inscription: 05 Oct 2009 22:06
 
Haut
Suivante
Répondre

Sujets similaires

Message Résolu - Skype sur Windows 10 : A JavaScript error occurred
Re,,Excuse moi tout à l'heure j'ai eu droit à une urgence ordinatoresque, mon frère m'a amené un PC a améliorer donc voir le coût à envisager et commander les pièces. Quand c'est pour la famille ou une association c'est toujours urgent, nous c'est de famille assister les gens moi par le net et l'aid ...
Réponses: 9

Message lien publicitaire supprimé
lien publicitaire supprimé
Réponses: 0

Message Suppression lien obsolète
Bonjour.Dans Poste de Travail sous Windows 10, je n'arrive pas à supprimer le lien One Drive Alstom.Ne travaillant plus pour cette société et le compte désactivé, j'ai pu supprimer le compte dans One Drive mais le lien existe toujours dans l'explorateur.Merci pour toute suggestion Cordialement.
Réponses: 1

Message firefox cliquer lien ouvrir nouvel onglet auto ?
bonjour, ce matin et les 10 années qui précédent, quand je faisais une recherche google par images, lorsque je cliquais bouton gauche sur une image la page du lien s'ouvrait dans un nouvel onglet automatiquement, ce soir il ne se passe plus rien quand je fais la meme opération il faut que je clique ...
Réponses: 1

Message Ou est passé le widget "lien" de Wordpress?
Bonjour.J'aimerais ajouter des liens de blogs que j'aime sur la page d'accueil de mon propre blog mais je ne trouve aucun widget qui me permettrait de le faire. Selon les tutoriels que j'ai consulté, il est censé exister un widget "lien" mais j'ai cliqué partout et il est introuvable. ...
Réponses: 0

Message Intégrer du javascript
Bonjour à tous, je souhaiterais savoir comment intégrer ces trois codes(voir ci-dessous) (pour un test) sur du langage web, que faut-il faire exactementpour intégrer ces codes pour avoir le motif (normalement mobile) en dessous des codes. Merci Deux liens si l'un ne fonctionne pas :https://image.noe ...
Réponses: 0

Message Lien modifié à mon insu dans ma messagerie Gmail
Bonjour à tous, J'ai récemment créé une page web sur un site d'édition en ligne (Wix), acheté un nom de domaine et décider de transmettre le lien de la page nouvellement créée à certains de mes contacts pro; J'ai donc copié-collé l'adresse de ma page dans ma messagerie gmail et envoyé mon mail. Or, ...
Réponses: 2

Haut

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 4 invités

Forum Informatique aide pour le matériel sous Windows, Linux, Logiciels et Jeux Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group

.: Nous contacter :: Flux RSS :: Données personnelles :.