Change the value of a select option (input)
Solved
Krustiz
Posted messages
73
Status
Member
-
Krustiz Posted messages 73 Status Member -
Krustiz Posted messages 73 Status Member -
```javascript
function functionBrut() {
document.querySelector('select[name="article"]').value = "Distinction en or brut";
}
```
function functionBrut() {
document.querySelector('select[name="article"]').value = "Distinction en or brut";
}
```
3 answers
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>TEST</title> </head> <body> <div class="btn-light" onclick="functionBrut(this);">Raw gold distinction</div> <select id="article" name="article" placeholder="Choose an article"> <option value="" disabled selected hidden>Choose your article</option> <optgroup label="Public service"> <option value="Bronze distinction">Article 1</option> <option value="Silver distinction">Article 2</option> <option value="Gold distinction">Article 3</option> <option value="Raw gold distinction">Article 4</option> </optgroup> </select> <script type="text/javascript"> function functionBrut(el) { document.getElementById("article").value = el.innerHTML; } </script> </body> </html>
Best regards,
Jordane-
Sure, thank you!
However, I don't understand how your script works, how to adapt it?
I understood that my functionBrut retrieves the value of the select element "article," but after that :x
I understood that my functionBrut retrieves the value of the select element "article"
The element with the ID "article"
To set the option to select... you just need to choose the "value"document.getElementById("article").value = "TheValueYouWant";
I made it so that it takes the value contained in the clicked div.el.innerHTML
the "el" comes from the function parameterfunction functionBrut(el) {
this parameter is sent in the onclickonclick="functionBrut(this);"
this referring to the element itself.
There you go.
For the rest, there's the internet....
-
-
```html 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(); changeSelect('Pass VIP');"><img src="assets/styles/images/icon_137.png" /> Pass VIP</div> <div class="btn-light" onclick="functionPseudo(); changeSelect('Changement de pseudo');"><img src="assets/styles/images/icon_96774.png" />Changement de pseudo</div> <div class="btn-light" onclick="functionCreds(); changeSelect('10 crédits habbo');"><img src="assets/styles/images/icon_658.png" />10 crédits habbo</div> <div class="btn-light" onclick="functionSignature(); changeSelect('Signature forum');"><img src="assets/styles/images/iconsign.png" />Signature forum</div> <div class="btn-light" onclick="functionComportement(); changeSelect('Certificat de comportement');"><img src="assets/styles/images/crtfdec.png" />Certificat de comportement</div> <div class="btn-light" onclick="functionBanquier(); changeSelect('Banquier');"><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-select"> <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."; } function changeSelect(value) { document.getElementById("article-select").value = value; }
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. ```-
Hello,
First of all... even if it's not the cause of your issue... know that in programming you should avoid certain characters in variable names (just like for some HTML attributes like id or name)
So.. to begin with... no spaces... no hyphens (you can replace hyphens with underscores).
Next...
as soon as I click on the text contained in the div, the select changes value, but to a null value
You must have forgotten a part of your code... because the behavior indicated is not present with the code you showed us...
In fact, there is.. no code that allows modifying the choice in the select among the code you provided us.
Furthermore... since you don’t have just text in your div btn... but you also included images.... it's normal that it crashes! You'll need to modify your code a bit.
Then... the ID of your select no longer exists..... why???
Anyway...
First, let's give an ID to your select<select name="article" id="article">
Then we create a functionfunction setSelectValue(select_id,valeur_a_selectionner){ document.getElementById(select_id).value = valeur_a_selectionner; }
and then.. in your different functions.. you call it like this:function functionVip() { document.getElementById("categories-furni-title").innerHTML = "VIP Pass"; document.getElementById("categories-furni-desc").innerHTML = "Allows you to become a VIP for 1 month, the price may be subject to reductions with the wearing of a former officer badge, details on VIP benefits by <a href='https://republique.superforum.fr/t13705-vip' style='color: white;'>clicking here</a>. "; setSelectValue('article',"VIP Pass") ; //here we select the select to update and the desired value }
I'll let you take care of the others. -
I'm not sure I understood correctly, here is what I did:
<div id="furni"> <div id="categories-title"><img src="https://zupimages.net/up/19/03/llcg.png" />Public Service</div> <div class="btn-light" onclick="functionVip(), setSelectValue(this);"><img src="assets/styles/images/icon_137.png" /> VIP Pass</div> <div class="btn-light" onclick="functionPseudo();"><img src="assets/styles/images/icon_96774.png" />Change Pseudo</div> <div class="btn-light" onclick="functionCreds();"><img src="assets/styles/images/icon_658.png" />10 Habbo Credits</div> <div class="btn-light" onclick="functionSignature();"><img src="assets/styles/images/iconsign.png" />Forum Signature</div> <div class="btn-light" onclick="functionComportement()"><img src="assets/styles/images/crtfdec.png" />Behavior Certificate</div> <div class="btn-light" onclick="functionBanquier();"><img src="assets/styles/images/icon_124.png" />Banker</div> </div> <div id="contenair"> <div id="categories-furni-title">Choose an item!</div> <div id="categories-furni-desc">You can choose an item from the navigation menu.</div> <div id="form"> <form> <input type="text" name="Habbo Pseudo" placeholder="Enter your Habbo pseudo"> <input type="text" name="Forum Pseudo" placeholder="Enter your forum pseudo"> <select name="article" id="article"> <option value="" disabled selected hidden>Choose your article</option> <optgroup label="Public Service"> <option value="VIP Pass">VIP Pass</option> <option value="Change Pseudo">Change Pseudo</option> <option value="10 Habbo Credits">10 Habbo Credits</option> <option value="Forum Signature">Forum Signature</option> <option value="Behavior Certificate">Behavior Certificate</option> <option value="Banker">Banker</option> </optgroup> </select> <input type="number" name="Quantity" placeholder="Choose a quantity" min="1" max="10"> <button class="button" style="vertical-align:middle" type="submit"><span>Buy </span></button> </form> </div> </div>
function setSelectValue(el) { document.getElementById(article).value = innerHTML; } function functionVip() { document.getElementById("categories-furni-title").innerHTML = "VIP Pass"; document.getElementById("categories-furni-desc").innerHTML = "Allows you to become VIP for 1 month, the price may be subject to discounts with the carrying of a former rank badge, details on VIP benefits by <a href='https://republique.superforum.fr/t13705-vip' style='color: white;'>clicking here</a>. "; setSelectValue('article',"VIP Pass"); }
Thanks in advance :) -
-
Well, I copied and pasted, and I filled in the fields, why shouldn't I have?
- In the previous code (the one I relied on... you had:
<div class="btn-light" onclick="functionVip();">
How can you now have<div class="btn-light" onclick="functionVip(), setSelectValue(this);">
Then...
I provided you with the code for the function functionVip();.....
All you have left to do is the same thing with your other functions:function functionPseudo() function functionCreds() function functionSignature() function functionComportement() function functionBanquier()
-
-
