Menu

Changer la valeur d'un select option (input) [Résolu]

Messages postés
46
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
20 avril 2019
- - Dernière réponse : Krustiz
Messages postés
46
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
20 avril 2019
- 23 févr. 2019 à 10:51
Bonjour,

Je cherche à modifier la valeur de mon input select en changeant l'option

Voici mon code :

HTML :

<div class="btn-light" onclick="functionBrut();">Distinction en or brut</div>

<select name="article" placeholder="Choissiez un article">
  <option value="" disabled selected hidden>Choissiez votre article</option>
    <optgroup label="Service public">
    <option value="Distinction en bronze">Article 1</option>
    <option value="Distinction en argent">Article 2</option>
    <option value="Distinction en or">Article 3</option>
    <option value="Distinction en or brut">Article 4</option>
  </optgroup>
</select>


JS :

<script type="text/javascript">
function functionBrut() {
??? }</script>

Quel code JavaScript dois-je inclure pour changer la valeur de mon input au clic dans la div btn-light ?


Configuration: Windows / Chrome 72.0.3626.109
Afficher la suite 

Votre réponse

3 réponses

Meilleure réponse
Messages postés
25568
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 mai 2019
1977
1
Merci
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8" />
   <title>TEST</title>
 </head>
 <body>

  <div class="btn-light" onclick="functionBrut(this);">Distinction en or brut</div>
  <select id="article" name="article" placeholder="Choissiez un article">
    <option value="" disabled selected hidden>Choissiez votre article</option>
      <optgroup label="Service public">
      <option value="Distinction en bronze">Article 1</option>
      <option value="Distinction en argent">Article 2</option>
      <option value="Distinction en or">Article 3</option>
      <option value="Distinction en or brut">Article 4</option>
    </optgroup>
  </select>
  <script type="text/javascript">
  function functionBrut(el) {
    document.getElementById("article").value = el.innerHTML;

  }
  </script> 
 </body>
</html>


Cordialement, 
Jordane                                                                 

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 39110 internautes nous ont dit merci ce mois-ci

Krustiz
Messages postés
46
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
20 avril 2019
1 -
Ça marche, merci !
Mais par contre, je ne comprends pas comment votre script fonctionne, comment faire pour l'adapter ?
J'ai compris que ma fonctionBrut récupère la valeur de l'élément select "article", mais après :x
jordane45
Messages postés
25568
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 mai 2019
1977 > Krustiz
Messages postés
46
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
20 avril 2019
-

J'ai compris que ma fonctionBrut récupère la valeur de l'élément select "article"

L'élément dont l' ID est "article"
Pour définir l'option à selectionner... il suffit de choisir la "value"
 document.getElementById("article").value = "LaValeurQueTuVeux";

Moi j'ai fait en sorte que ça prenne la valeur contenu dans la div cliquée.
el.innerHTML


le "el" vient du paramètre de la fonction
 function functionBrut(el) {


ce paramètre en envoyé dans le onclick
onclick="functionBrut(this);"

this faisant référence à l'élément lui même.

Voila.
Pour le reste il y a internet....
Commenter la réponse de jordane45
Messages postés
46
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
20 avril 2019
1
0
Merci
Bonjour,
Je rencontre un petit problème, j'essaye d'adapter le script fourni précédemment, mais dès que je clic sur le texte contenu dans la div, le select change bien de valeur, mais pour une valeur nul ! Voici mon code :

CODE HTML :

<div id="furni">
    <div id="categories-title"><img src="https://zupimages.net/up/19/03/llcg.png" />Service public</div>
    <div class="btn-light" onclick="functionVip();"><img src="assets/styles/images/icon_137.png" /> Pass VIP</div>
    <div class="btn-light" onclick="functionPseudo();"><img src="assets/styles/images/icon_96774.png" />Changement de pseudo</div>
    <div class="btn-light" onclick="functionCreds();"><img src="assets/styles/images/icon_658.png" />10 crédits habbo</div>
    <div class="btn-light" onclick="functionSignature();"><img src="assets/styles/images/iconsign.png" />Signature forum</div>
    <div class="btn-light" onclick="functionComportement()"><img src="assets/styles/images/crtfdec.png" />Certificat de comportement</div>
    <div class="btn-light" onclick="functionBanquier();"><img src="assets/styles/images/icon_124.png" />Banquier</div>
</div>
<div id="contenair">
    <div id="categories-furni-title">Choisissez un article !</div>
    <div id="categories-furni-desc">Vous pouvez choisir un article dans le menu de navigation.</div>
    <div id="form">
        <form>
            <input type="text" name="Pseudo habbo" placeholder="Entrez votre pseudo Habbo">
            <input type="text" name="Pseudo forum" placeholder="Entrez votre pseudo forum">
            <select name="article">
                <option value="" disabled selected hidden>Choissiez votre article</option>
                <optgroup label="Service public">
                    <option value="Pass VIP">Pass VIP</option>
                    <option value="Changement de pseudo">Changement de pseudo</option>
                    <option value="10 crédits habbo">10 crédits habbo</option>
                    <option value="Signature forum">Signature forum</option>
                    <option value="Certificat de comportement">Certificat de comportement</option>
                    <option value="Banquier">Banquier</option>
                </optgroup>
            </select>
            <input type="number" name="Quantité" placeholder="Choissiez une quantité" min="1" max="10">
            <button class="button" style="vertical-align:middle" type="submit"><span>Acheter   </span></button>
        </form>
    </div>
</div>


CODE JS :

function functionVip() {
    document.getElementById("categories-furni-title").innerHTML = "Pass VIP";
    document.getElementById("categories-furni-desc").innerHTML = "Permet de devenir VIP durant 1 mois, le tarif peut-être soumis à des réductions avec le port de badge d'ancien gradé, détail sur les avantages VIP en <a href='https://republique.superforum.fr/t13705-vip' style='color: white;'>cliquant ici</a>. ";
    }
    function functionPseudo() {
    document.getElementById("categories-furni-title").innerHTML = "Changement de pseudo";
    document.getElementById("categories-furni-desc").innerHTML = "Permet de changer son pseudo du forum, les symboles sont interdit. Vérifier la disponibilité du pseudo désiré en <a href='https://republique.superforum.fr/memberlist' style='color: white;'>cliquant ici</a>.";
    }
    function functionCreds() {
    document.getElementById("categories-furni-title").innerHTML = "10 crédits habbo";
    document.getElementById("categories-furni-desc").innerHTML = "Permet d'avoir 10 crédits sur habbo, l'échange est réalisé en jeu par un membre de l'administration.";
    }
    function functionSignature() {
    document.getElementById("categories-furni-title").innerHTML = "Signature forum";
    document.getElementById("categories-furni-desc").innerHTML = "Permet de rendre visible à la fin de vos messages un message texte (3 lignes).";
    }
    function functionComportement() {
    document.getElementById("categories-furni-title").innerHTML = "Certificat de comportement";
    document.getElementById("categories-furni-desc").innerHTML = "Le certificat de comportement permet de retirer un avertissement datant de 1 mois, le certificat de comportement est achetable une seule fois par semaine.";
    }
    function functionBanquier() {
    document.getElementById("categories-furni-title").innerHTML = "Banquier";
    document.getElementById("categories-furni-desc").innerHTML = "Permet de devenir gradé débutant (VI) durant 7 jours, après écoulement du délai, vous avez possibilité de transférer vers la filière de votre choix avec un grade bas gradé. Il est possible de conserver le grade Banquier durant 2 mois.";
    }


Ce que je veux, par exemple, dès que je clique sur la div btn-light qui contient le texte "Pass VIP", la valeur du select se modifie et prend la valeur du texte : donc Pass VIP.
jordane45
Messages postés
25568
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 mai 2019
1977 -
Bonjour,

Déjà... même si ce n'est pas la cause de ton souci... sache qu'en programmation il faut éviter certains caractères dans le nommage de ses variables (idem pour certains attributs html comme l'id ou le name )
Donc.. pour commencer... pas d'espace... pas de tiret (tu peux remplacer les tirets par des underscores).

Ensuite...

dès que je clic sur le texte contenu dans la div, le select change bien de valeur, mais pour une valeur nul

Tu as du oublié une partie de ton code... car le comportement indiqué n'est pas présent avec le code que tu nous montres...
Il n'y a d’ailleurs.. aucun code qui permet de modifier le choix dans le select parmis le code que tu nous as donné.

Ensuite... vu que tu n'as pas que du text dans tes div btn.. mais que tu y a également mis des images.... normal que ça plante ! va falloir modifier un peu ton code.

Puis... l'ID de ton select n'existe plus..... pourquoi ???

Bref...
Déjà on remet un ID à ton select
 <select name="article" id="article">


Puis on créé une fonction
function setSelectValue(select_id,valeur_a_selectionner){
    document.getElementById(select_id).value = valeur_a_selectionner;
  }


et ensuite.. dans tes différentes fonctions.. tu l'appelles comme ceci:
function functionVip() {
      document.getElementById("categories-furni-title").innerHTML = "Pass VIP";
      document.getElementById("categories-furni-desc").innerHTML = "Permet de devenir VIP durant 1 mois, le tarif peut-être soumis à des réductions avec le port de badge d'ancien gradé, détail sur les avantages VIP en <a href='https://republique.superforum.fr/t13705-vip' style='color: white;'>cliquant ici</a>. ";
      setSelectValue('article',"Pass VIP") ; //ici on choisi le select à mettre à jour et la valeur désirée
  }


Je te laisse faire les autres.
Krustiz
Messages postés
46
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
20 avril 2019
1 -
Je ne suis pas sûr d'avoir bien compris, voilà ce que j'ai fait :

<div id="furni">
   <div id="categories-title"><img src="https://zupimages.net/up/19/03/llcg.png" />Service public</div>
   <div class="btn-light" onclick="functionVip(), setSelectValue(this);"><img src="assets/styles/images/icon_137.png" /> Pass VIP</div>
   <div class="btn-light" onclick="functionPseudo();"><img src="assets/styles/images/icon_96774.png" />Changement de pseudo</div>
   <div class="btn-light" onclick="functionCreds();"><img src="assets/styles/images/icon_658.png" />10 crédits habbo</div>
   <div class="btn-light" onclick="functionSignature();"><img src="assets/styles/images/iconsign.png" />Signature forum</div>
   <div class="btn-light" onclick="functionComportement()"><img src="assets/styles/images/crtfdec.png" />Certificat de comportement</div>
   <div class="btn-light" onclick="functionBanquier();"><img src="assets/styles/images/icon_124.png" />Banquier</div>
</div>

<div id="contenair">
   <div id="categories-furni-title">Choisissez un article !</div>
   <div id="categories-furni-desc">Vous pouvez choisir un article dans le menu de navigation.</div>
<div id="form">
   <form>
      <input type="text" name="Pseudo habbo" placeholder="Entrez votre pseudo Habbo">
      <input type="text" name="Pseudo forum" placeholder="Entrez votre pseudo forum">
      <select name="article" id="article">
         <option value="" disabled selected hidden>Choissiez votre article</option>
         <optgroup label="Service public">
         <option value="Pass VIP">Pass VIP</option>
         <option value="Changement de pseudo">Changement de pseudo</option>
         <option value="10 crédits habbo">10 crédits habbo</option>
         <option value="Signature forum">Signature forum</option>
         <option value="Certificat de comportement">Certificat de comportement</option>
         <option value="Banquier">Banquier</option>
         </optgroup>
      </select>
      <input type="number" name="Quantité" placeholder="Choissiez une quantité" min="1" max="10">
      <button class="button" style="vertical-align:middle" type="submit"><span>Acheter   </span></button> 
   </form>
</div>
</div>


function setSelectValue(el) {
document.getElementById(article).value = innerHTML;
}
function functionVip() {
document.getElementById("categories-furni-title").innerHTML = "Pass VIP";
document.getElementById("categories-furni-desc").innerHTML = "Permet de devenir VIP durant 1 mois, le tarif peut-être soumis à des réductions avec le port de badge d'ancien gradé, détail sur les avantages VIP en <a href='https://republique.superforum.fr/t13705-vip' style='color: white;'>cliquant ici</a>. ";
setSelectValue('article',"Pass VIP");
}


Merci d'avance :)
jordane45
Messages postés
25568
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 mai 2019
1977 -
Tu ne peux pas juste copier/coller ce que je te donne ????
Krustiz
Messages postés
46
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
20 avril 2019
1 -
Bah j'ai copier coller, et j'ai rempli les champs, pourquoi fallait pas ?
jordane45
Messages postés
25568
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 mai 2019
1977 > Krustiz
Messages postés
46
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
20 avril 2019
-
Dans le code d'avant (celui sur lequel je me suis appuyé... tu avais :
<div class="btn-light" onclick="functionVip();">

Comment, peux tu avoir, désormais
<div class="btn-light" onclick="functionVip(), setSelectValue(this);">


Ensuite...
je t'ai fourni le code de la fonction functionVip() ;.....

Il ne te reste qu'à faire la même chose avec tes autres fonctions :
function functionPseudo()
function functionCreds() 
function functionSignature() 
function functionComportement() 
function functionBanquier() 
Commenter la réponse de Krustiz
Messages postés
46
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
20 avril 2019
1
0
Merci
Ça marche super, merci !
Commenter la réponse de Krustiz