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

Signaler
Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020
-
Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020
-
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

3 réponses

Messages postés
28832
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
1 juillet 2020
2 581
<!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                                                                 
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65809 internautes nous ont dit merci ce mois-ci

Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020
3
Ç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
Messages postés
28832
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
1 juillet 2020
2 581 >
Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020


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....
Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020
3
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.
Messages postés
28832
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
1 juillet 2020
2 581
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.
Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020
3
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 :)
Messages postés
28832
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
1 juillet 2020
2 581
Tu ne peux pas juste copier/coller ce que je te donne ????
Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020
3
Bah j'ai copier coller, et j'ai rempli les champs, pourquoi fallait pas ?
Messages postés
28832
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
1 juillet 2020
2 581 >
Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020

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() 
Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020
3
Ça marche super, merci !