Sujet Précédent Sujet Suivant

Changer la valeur d'un select option (input)

Résolu/Fermé
Krustiz Messages postés 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020 - 16 févr. 2019 à 16:42
Krustiz Messages postés 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020 - 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

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié le 16 févr. 2019 à 18:18 
<!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>


1
Krustiz Messages postés 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020 3
16 févr. 2019 à 19:21
Ç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
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > Krustiz Messages postés 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020
16 févr. 2019 à 19:45

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....
0
Réponse 2 / 3
Krustiz Messages postés 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020 3
20 févr. 2019 à 15:57
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.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
20 févr. 2019 à 19:34
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.
0
Krustiz Messages postés 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020 3
21 févr. 2019 à 12:56
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 :)
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
21 févr. 2019 à 15:46
Tu ne peux pas juste copier/coller ce que je te donne ????
0
Krustiz Messages postés 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020 3
21 févr. 2019 à 16:19
Bah j'ai copier coller, et j'ai rempli les champs, pourquoi fallait pas ?
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > Krustiz Messages postés 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020
21 févr. 2019 à 17:23
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()
0
Réponse 3 / 3
Krustiz Messages postés 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020 3
23 févr. 2019 à 10:51
Ça marche super, merci !
0

Discussions similaires

input signal out of range
marlene -
usman000 -

14 réponses
"Reboot and Select proper Boot Device"
Rodoxx -
Patrick -

5 réponses
Aide Please select boot device
Romanitouu -
jee pee -

1 réponse
No video input après mise en veille
Shaverguy -
Shaverguy -

17 réponses
No video input
ChouNell -
poupougne13 -

30 réponses