Liste déroulante multiple, récupérer le contenu [Résolu]

Question

Posez votre question Signaler

Liste déroulante multiple, récupérer le contenu [Résolu]

dmoluc

Messages postés: 21
Date d'inscription: dimanche 8 juillet 2018
Dernière intervention: 14 juillet 2018

- 8 juil. 2018 à 14:27 - Dernière réponse : jordane45

Messages postés: 24578
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 19 février 2019

- 8 juil. 2018 à 18:16

Javascript / DHTML Posez votre question Signaler

Bonjour,
je sais qu'il y a plein de post sur le sujet et pourtant je ne m'en sort pas J'avais une liste déroulante sur une page et mon code fonctionner trés bien

var texte = 'String'

      document.querySelector("select").addEventListener("change", function() {

          texte=(this.value);

          rechercher();
      }, false);

le problème est que j'ai une nouvelles page avec 4 listes déroulantes et là rien ne va plus. J'y suis depuis ce matin sans le moindre succès.
voilà une de mes listes (la plus petite les autres sont immenses et j'espère qu'il y a une solution car beaucoup de boulot pour rien)

 <p> <select name="bouteur" select onChange="bouteur.value=this.value" class="donnée" id="bouteur">
        <option id=vide >Bouteur</option>
            <option id=D9U >D9 Lame U</option>
            <option id=D9S >D9 Lame S</option>
            <option id=D8U >D8 Lame U</option>
            <option id=D8S >D8 Lame S</option>
            <option id=D7U >D7 Lame U</option>
            <option id=D7S >D7 Lame S</option>
            <option id=D6S >D6 Lame S</option>
            <option id=D5S >D5 Lame S</option>
            <option id=D4S >D4 Lame S</option>
 </select>

var texte = 'String'

document.querySelector("select").addEventListener("change", function() {

    texte=(this.value);

    rechercher();
}, false);



//var texte = JQuery(#bouteur option:"selected").text(); //la variable texte reçoit le texte contenu dans l'option sélectionnée.
alert(texte);




rechercher();

quelqu'un aurait une solution qui fonctionne et surtout que je puisse comprendre car pour le moment tout ce que j'ai vu ne fonctionne pas ou que je ne comprend pas

Afficher la suite

A voir également:

Votre réponse

Répondre au sujet

5 réponses

Votre réponse

Répondre au sujet

Posez votre question

jordane45 · Answer 1 · 2018-07-08T14:39:29+0200

Bonjour,

Plusieurs choses qui ne vont pas...
Déjà... tu as un "select" qui traine en plein milieu et qui n'a rien à faire là.
Ensuite, pourquoi vouloir faire un code avec un listener ... alors que tu as utilisé l'attribut ONCHANGE de ton select...

Il suffit dans le onchange de ton select, d'envoyer directement la valeur à chercher à ta fonction "rechercher"

<select name="bouteur" onchange="rechercher(this.value);" class="donnée" id="bouteur">

Et vu que tu envoies la valeur à chercher directement en pramètre de la fonction... il faut modifier ta fonction comme ceci:

function  rechercher(texte) {
 //le reste de ton code

}

NB: Si après ces modifications ton code ne fonctionne toujours pas, reviens nous voir avec le code modifié ET indique nous les éventuelles erreurs qui se trouveraient dans la CONSOLE de ton navigateur.

NB²: Lorsque tu postes ton code sur le forum, n'oublie pas d'indiquer le LANGAGE dans les balises de code afin que l'on aie la coloration syntaxique.
Explications disponibles ici : http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

.

dmoluc · Answer 2 · 2018-07-08T15:19:27+0200

merci pour la réponse mais il doit y avoir quelque chose que je n'ai pas compris car ça ne fonctionne pas

texte=(this.value);

function rechercher(texte) {

    alert(coucou)

if (texte == "D9 lame U") {
document.getElementById("bull").value = D9 lame U
}

else if (texte == "D9 lame S") {
document.getElementById("bull").value = D9 lame S
}

else if (texte == "D8 lame U") {
document.getElementById("bull").value = D8 lame U
}

else if (texte == "D8 lame S") {
document.getElementById("bull").value = D8 lame S
}

else if (texte == "D7 lame U") {
document.getElementById("bull").value = D7 lame U
}

else if (texte == "D7 lame S") {
document.getElementById("bull").value = D7 lame S
}

else if (texte == "D6 lame S") {
document.getElementById("bull").value = D6 lame S
}

else if (texte == "D5 lame S") {
document.getElementById("bull").value = D5 lame S
}

else if (texte == "D4 lame S") {
document.getElementById("bull").value = D4 lame S

}

<p> <select name="bouteur" onChange="rechercher(this.value)" class="donnée" id="bouteur">
        <option id=vide >Bouteur</option>
            <option id=D9U >D9 Lame U</option>
            <option id=D9S >D9 Lame S</option>
            <option id=D8U >D8 Lame U</option>
            <option id=D8S >D8 Lame S</option>
            <option id=D7U >D7 Lame U</option>
            <option id=D7S >D7 Lame S</option>
            <option id=D6S >D6 Lame S</option>
            <option id=D5S >D5 Lame S</option>
            <option id=D4S >D4 Lame S</option>
 </select>

et voilà le message d'erreur de Firefox : [Afficher/Masquer les détails du message.] ReferenceError: rechercher is not defined[En savoir plus]
bull2.html:1:1
onchange
file:///C:/Users/DMO/Desktop/html/bull2.html:1:1
receiveMessage
resource://gre/modules/SelectContentHelper.jsm:293:13

dmoluc · Answer 3 · 2018-07-08T15:39:39+0200

en fait la valeur je pourrais la récupérée dans la première zonne de texte (id bull) mais bien sur je ne sais pas comment m'y prendre, ensuite je sais faire pour récupérer la valeur et lancer la recherche des éléments manquants

<p><input type="texte" id="bull" placeholder="Bouteur"> 
<input type="text" id="RHfort"  placeholder="lecture abaque"> 
<input type="text" id="corecteur" value=0.70> 
<input type="text" id="indice" placeholder="indice foisonnement" > 
<input type="text" id="pente" placeholder="Coef pente" > 
<input type="text" id="efficience"  placeholder="Coef efficience"> 
<input type="text" id="efficience" placeholder="Rendement"</p>

jordane45 · Answer 4 · 2018-07-08T16:05:48+0200

Oulaaaa.... y'a du boulot....
- Tu n'as toujours pas mis la coloration syntaxique !!
- dans un SELECT .. les options n'ont pas d'attribut ID mais un attribut VALUE
- Que fou ce

texte=(this.value);

juste avant ta fonction ??? Il n'a rien à faire là.
- Les "textes" doivent être entre guillemets
- Pourquoi faire des IF .. vu que tu veux directement recupérer la valeur dans le champ input

Bref...
Essayes ça

<!DOCTYPE html>
<html>
 <head>
  <title> TEST </title>
  <meta charset="utf8">
 </head>

  <body> 
      <p> 
      <select name="bouteur" onChange="rechercher(this)" class="donnée" id="bouteur">
        <option value="">Bouteur</option>
        <option value="D9U" >D9 Lame U</option>
        <option value="D9S" >D9 Lame S</option>
        <option value="D8U" >D8 Lame U</option>
        <option value="D8S" >D8 Lame S</option>
        <option value="D7U" >D7 Lame U</option>
        <option value="D7S" >D7 Lame S</option>
        <option value="D6S" >D6 Lame S</option>
        <option value="D5S" >D5 Lame S</option>
        <option value="D4S" >D4 Lame S</option>
     </select>
  
    <p><input type="texte" id="bull" placeholder="Bouteur"> 
    <input type="text" id="RHfort"  placeholder="lecture abaque"> 
    <input type="text" id="corecteur" value=0.70> 
    <input type="text" id="indice" placeholder="indice foisonnement" > 
    <input type="text" id="pente" placeholder="Coef pente" > 
    <input type="text" id="efficience"  placeholder="Coef efficience"> 
    <input type="text" id="efficience" placeholder="Rendement"</p>

    <script type="text/javascript">
    function rechercher(elm) {
      var optionValue = elm.value
      var optionText = elm.options[elm.selectedIndex].text;
      alert(optionText);
      document.getElementById("bull").value = optionText;
    }
    </script>
  </body>
</html>

PS: Vu tes erreurs... avant de poursuivre tu devrais te former un minimum... ce qu'est une variable et comment l'utiliser.

super c'est exactement ce que je recherchais, un grand merci jordanne 45

dmoluc · Answer 5 · 2018-07-08T16:41:53+0200

Signaler Commenter la réponse de dmoluc

dmoluc

Messages postés: 21
Date d'inscription: dimanche 8 juillet 2018
Dernière intervention: 14 juillet 2018

8 juil. 2018 à 16:41

0

Merci

Merci, ça fonctionne du tonnerre mais il faut que je place la fonction dans le head sinon le code ne reconnais pas "rechercher"
a force de passer le code en revue, j'ai vu horrifié que j'avais écrit plein de coquilles comme quoi travailler le dimanche ça ne me réussis pas, mais encore un grand merci je vais enfin pouvoir avancer.
Ce n'est sans doute pas la meilleur façon de faire mais je me sers de liste déroulante et de fonction java pour créer une base de donnée pas mal étoffée. Il doit y avoir des moyens plus simples que je ne connais pas, alors quel nouveau langage dois-je apprendre pour réaliser des programmes plus performants?

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 24578
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 19 février 2019

362 - 8 juil. 2018 à 18:16

C'est du javascript et non du Java (deux langages différents ! )
Ensuite, pour faire une BDD.. tu peux utiliser mysql....
Quoi qu'il en soit, il te faut apprendre le SQL et un langage serveur comme le PHP par exemple.

Liste déroulante multiple, récupérer le contenu [Résolu]

Votre réponse

Votre réponse

Votre réponse

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !