1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

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

Signaler
Messages postés
21
Date d'inscription
dimanche 8 juillet 2018
Statut
Membre
Dernière intervention
14 juillet 2018
 -
Messages postés
32458
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 mai 2021
 -
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

5 réponses

Réponse 1 / 5
Messages postés
32458
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 mai 2021
 347
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


.
Réponse 2 / 5
Messages postés
21
Date d'inscription
dimanche 8 juillet 2018
Statut
Membre
Dernière intervention
14 juillet 2018
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
Réponse 3 / 5
Messages postés
21
Date d'inscription
dimanche 8 juillet 2018
Statut
Membre
Dernière intervention
14 juillet 2018
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>
Réponse 4 / 5
Messages postés
32458
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 mai 2021
 347
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.





Signaler
Messages postés
21
Date d'inscription
dimanche 8 juillet 2018
Statut
Membre
Dernière intervention
14 juillet 2018
super c'est exactement ce que je recherchais, un grand merci jordanne 45
Réponse 5 / 5
Messages postés
21
Date d'inscription
dimanche 8 juillet 2018
Statut
Membre
Dernière intervention
14 juillet 2018
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
Messages postés
32458
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 mai 2021
 347
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.
Répondre Posez votre question