Cambiar el valor de un select option (input)
Resuelto
Krustiz
Mensajes publicados
73
Estado
Miembro
-
Krustiz Mensajes publicados 73 Estado Miembro -
Krustiz Mensajes publicados 73 Estado Miembro -
Pour changer la valeur de votre input select au clic dans la div btn-light, vous pouvez utiliser le code JavaScript suivant :
```javascript
function functionBrut() {
document.querySelector('select[name="article"]').value = "Distinction en or brut";
}
```
```javascript
function functionBrut() {
document.querySelector('select[name="article"]').value = "Distinction en or brut";
}
```
3 respuestas
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>TEST</title> </head> <body> <div class="btn-light" onclick="functionBrut(this);">Distinción en oro bruto</div> <select id="article" name="article" placeholder="Elija un artículo"> <option value="" disabled selected hidden>Elija su artículo</option> <optgroup label="Servicio público"> <option value="Distinción en bronce">Artículo 1</option> <option value="Distinción en plata">Artículo 2</option> <option value="Distinción en oro">Artículo 3</option> <option value="Distinción en oro bruto">Artículo 4</option> </optgroup> </select> <script type="text/javascript"> function functionBrut(el) { document.getElementById("article").value = el.innerHTML; } </script> </body> </html>
Cordialement,
Jordane-
¡Funciona, gracias!
Pero no entiendo cómo funciona su script, ¿cómo puedo adaptarlo?
He entendido que mi funciónBrut recupera el valor del elemento select "artículo", pero luego :x
He entendido que mi funciónBrut recupera el valor del elemento select "artículo"
El elemento cuyo ID es "artículo"
Para definir la opción a seleccionar... solo hay que elegir el "value"document.getElementById("artículo").value = "LaValorQueQuieres";
Yo he hecho que tome el valor contenido en la div clicada.el.innerHTML
el "el" proviene del parámetro de la funciónfunction functionBrut(el) {
este parámetro se envía en el onclickonclick="functionBrut(this);"
this refiriéndose al elemento mismo.
Eso es todo.
Para el resto, hay internet....
-
-
```html
Service public
Pass VIP
Changement de pseudo
10 crédits habbo
Signature forum
Certificat de comportement
Banquier
Choisissez un article !
Vous pouvez choisir un article dans le menu de navigation.
<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="disabled" selected="selected" hidden="">Choisissez 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="Choisissez une quantité" min="1" max="10" />
<button class="button" style="vertical-align:middle" type="submit">Acheter </button>
</form>
```
```javascript
function setSelectValue(value) {
document.getElementById("article-select").value = value;
}
```-
Hola,
Ya... aunque no sea la causa de tu problema... ten en cuenta que en programación hay que evitar ciertos caracteres en el nombrado de las variables (lo mismo para algunos atributos html como el id o el name)
Entonces... para empezar... no debe haber espacios... no debe haber guiones (puedes reemplazar los guiones por guiones bajos).
Después...
en cuanto hago clic en el texto contenido en el div, el select cambia bien de valor, pero a un valor nulo
Debes haber olvidado una parte de tu código... porque el comportamiento indicado no está presente con el código que nos muestras...
De hecho... no hay ningún código que permita modificar la elección en el select entre el código que nos diste.
Luego... dado que no tienes solo texto en tus div btn... sino que también has puesto imágenes.... es normal que falle! tendrás que modificar un poco tu código.
Y... el ID de tu select ya no existe..... ¿por qué???
En fin...
Primero le ponemos un ID a tu select<select name="article" id="article">
Luego creamos una funciónfunction setSelectValue(select_id,valeur_a_selectionner){ document.getElementById(select_id).value = valeur_a_selectionner; }
y después.. en tus diferentes funciones.. la llamas así:function functionVip() { document.getElementById("categories-furni-title").innerHTML = "Pase VIP"; document.getElementById("categories-furni-desc").innerHTML = "Permite convertirse en VIP durante 1 mes, la tarifa puede estar sujeta a descuentos con el uso de la insignia de antiguo graduado, detalles sobre las ventajas VIP en <a href='https://republique.superforum.fr/t13705-vip' style='color: white;'>clicando aquí</a>. "; setSelectValue('article',"Pase VIP") ; //aquí elegimos el select a actualizar y el valor deseado }
Te dejo hacer los demás. -
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" />Servicio público</div> <div class="btn-light" onclick="functionVip(), setSelectValue(this);"><img src="assets/styles/images/icon_137.png" /> Pasa VIP</div> <div class="btn-light" onclick="functionPseudo();"><img src="assets/styles/images/icon_96774.png" />Cambio de seudónimo</div> <div class="btn-light" onclick="functionCreds();"><img src="assets/styles/images/icon_658.png" />10 créditos habbo</div> <div class="btn-light" onclick="functionSignature();"><img src="assets/styles/images/iconsign.png" />Firma del foro</div> <div class="btn-light" onclick="functionComportement()"><img src="assets/styles/images/crtfdec.png" />Certificado de comportamiento</div> <div class="btn-light" onclick="functionBanquier();"><img src="assets/styles/images/icon_124.png" />Banquero</div> </div> <div id="contenair"> <div id="categories-furni-title">¡Elija un artículo!</div> <div id="categories-furni-desc">Puede elegir un artículo en el menú de navegación.</div> <div id="form"> <form> <input type="text" name="Pseudo habbo" placeholder="Ingresa tu seudónimo Habbo"> <input type="text" name="Pseudo forum" placeholder="Ingresa tu seudónimo de foro"> <select name="article" id="article"> <option value="" disabled selected hidden>Elige tu artículo</option> <optgroup label="Servicio público"> <option value="Pass VIP">Pasa VIP</option> <option value="Changement de pseudo">Cambio de seudónimo</option> <option value="10 crédits habbo">10 créditos habbo</option> <option value="Signature forum">Firma del foro</option> <option value="Certificat de comportement">Certificado de comportamiento</option> <option value="Banquier">Banquero</option> </optgroup> </select> <input type="number" name="Quantité" placeholder="Elige una cantidad" min="1" max="10"> <button class="button" style="vertical-align:middle" type="submit"><span>Comprar </span></button> </form> </div> </div>
function setSelectValue(el) { document.getElementById(article).value = innerHTML; } function functionVip() { document.getElementById("categories-furni-title").innerHTML = "Pasa VIP"; document.getElementById("categories-furni-desc").innerHTML = "Permite convertirse en VIP durante 1 mes, el precio puede estar sujeto a descuentos con el uso de la insignia de ex gradado, detalles sobre las ventajas VIP en <a href='https://republique.superforum.fr/t13705-vip' style='color: white;'>haciendo clic aquí</a>. "; setSelectValue('article',"Pasa VIP"); }
Gracias de antemano :) -
-
Lo he copiado y pegado, y he llenado los campos, ¿por qué no se podía?
- 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()
-
-
