[SOLUCIONADO] Select dinámico

[Lossarnach]

Bueno soy un novato en esto del Javascript, ya medio domino el PHP, pero como digo Javascript me resulta novedoso, aquí va la pregunta:

Quiero hacer que seleccionando una opción de un select, que está dentro de una celda de una tabla en la celda contigua me salga un valor, p.e., opción1 = queso saldría valor 4 €, seleccionamos chorizo sale 3 €. Os pongo el código erróneo:

Código:

<!-- Este es el select con dos opciones.
<td><select onchange="seleccion()"><option id="queso">queso</option><option id="chorizo">chorizo</option></select></td>
<td>
<script>
     function seleccion(){
          if(document.getElementById("queso").value == "queso"){
               document.write("4 €");
          }else{
               document.write("3 €");		
          }
     }
</script>
</td>

Espero que me haya explicado y quede claro mi explicación.

Un saludo.

[darkhack3r22]

Esto..................... Te vas a reír un ratito por que arriba tienes un <!-- que hace que no se ejecute el código. Me temo que estas confundiendo el // de javascript con el <!-- No se ejecuta--> de html. Saludos.

[Lossarnach]

No este comentario lo he puesto aquí como aclaración, en mi código no tengo por costumbre poner comentarios, a no ser que sea para una web de otra persona que comento cualquier cosa anómala, pero como he dicho el comentario lo he puesto solo en el código de la pregunta.

Lo del comentario de una línea no lo sabía en javascript, por eso he puesto el <!-- --> como podía poner el /* */, o el //, no se si me explico.

Gracias y un saludo.

[darkhack3r22]

Iniciado por Lossarnach

No este comentario lo he puesto aquí como aclaración, en mi código no tengo por costumbre poner comentarios, a no ser que sea para una web de otra persona que comento cualquier cosa anómala, pero como he dicho el comentario lo he puesto solo en el código de la pregunta.

Lo del comentario de una línea no lo sabía en javascript, por eso he puesto el <!-- --> como podía poner el /* */, o el //, no se si me explico.

Gracias y un saludo.

Hola, Buenas noticias. He echado un vistazo a tu código, y veo que al obtener el elemento pones
.value=="queso" y no has especificado ningún valor. Te confundiste con lo que viene a ser el innerHTML de una etiqueta ej: <p id="patata">Hello world!</p> var x = document.getElementById('patata').innerHTML; x=="Hello world!"
Pues eso querias hacer para verificar el option. Ademas se suele tomar como referencia de cada elemento formado por el select, un value que era lo que decias pero lo pusiste mal. Ej:
<option value="opcion1">Jamon serrano</option> esto lo haces para no tener que recurrir al texto de la etiqueta que no es ningun identificador, de esta forma tienes un valor especificado para esa opción que te servira para PHP, eso ya mas avanzado y fundamentalmente para lo que querías hacer con el value. Simplemente añade un valor a tus opciones para distinguirlas y listo! Saludos y te agradecería que me añadieras un poquito de kama si te resulto útil. ;))

[Lossarnach]

Bueno me estas ayudando a entender los nuevos términos del nuevo lenguaje, pero no me ha solucionado os pongo el código corregido:

Código:

<td><select onchange="seleccion()"><option id="tankUSA">Sherman</option><option id="tankUK">Churchill</option></select></td>
         <td><script>
		function seleccion(){
			var tanque = document.getElementById("tankUSA")
			if(tanque.innerHTML == "Sherman"){
				document.write("55");
			}else{
			        document.write("80");		
			}
		}
	</script></td>
</tr>

Por lo que entiendo es que cuando seleccionamos un elemento del select llamaremos a la función "seleccion()", y dentro de la función (esta vez son tanques) buscamos el elemento con la id "tankUSA" y después en el condicional buscamos el valor de la opción "Sherman", pero nada, me pone siempre el valor del else, cuando debería de mostrarme el primer valor porque cumple la condición.

Y otra cuestión es que me muestra el segundo valor en "otra" página, cuando digo otra página es que borra todo la página y solo pone el "80".

[darkhack3r22]

Bueno, aunque sean tanques, o porta-aviones este ejemplo bien hecho debería servirte.

Código HTML:

<b>Que te gusta mas?</b><br/>
<!--Empieza el select -->
<select onchange="fun()" id="select">
 
<option value="op1">Jamon</option>
<option value="op2">Queso</option>
<option value="op3">Chorizo</option>
 
</select>
<!--Fin del select-->
 
<script type="text/javascript">
function fun(){
//recogemos el valor del <select>, directamente con ID
var x = document.getElementById('select').value;
// Ahora podemos jugar con las posibilidades!!
if (x=="op1"){
alert("Te gusta el jamon!!");
}else{
if (x=="op2"){
alert("Te gusta el queso!!")
}
else{
alert("Te gusta el chorizo!!");
}
}
}
</script>
 

Es bien sencillito, deberías entenderlo... El <select> automaticamente adopta el valor del <option> que esta seleccionado en ese momento, por lo tanto no es necesario que te líes con innerHTML, no es buena idea. A ver si terminamos con tus dudas ;)

[Lossarnach]

Bien lo del select y todo el código referente a su script está más que solucionado y comprendido por la línea del código.

Ahora bien como podemos coger el dato del "alert" para ponerlo en una casilla adjunta, estamos hablando de tablas en una celda está el select y en la otra el dato a imprimir.

He probado el document.write("valor ha imprimir en la celda"); pero esto me imprime en la misma página pero borrando los datos de la página (el propio select y otros componentes).

Aparte de escribir dinámicamente, en la propia función podíamos escribir document.write("Te gusta el jamon!!"); para que por defecto cogiera el valor primero del select.

No sabes cuanto me estás ayudando, muchas gracias y un saludo.

[darkhack3r22]

Me alegro de que todo te vaya saliendo como debe. Lo del document.write() es cierto que se va el HTML de toda la página, ya que estas indicando con "document" que se escriba en TODO el cuerpo del archivo, reemplazandolo. Lo que tienes que hacer es crear por ejemplo un div para que se meta el mensaje:

Código HTML:

<div id="msg-container">
<!-- AQUI VA A IR TU TEXTO -->
<//div>
 

Y ahora con javascript lo obtenemos:
var obtener = Document.getElementById('msg-container');
Y ahora recurdas lo que te enseñe del innerHTML??:
obtener.innerHTML="Esto es el mensaje!!";
Y eso es todo! Si quieres que haya mas de un mensaje te pasara lo mismo de antes, que el anterior se borre. Pero un programador siempre tiene un plan B. Cambia el = por += y podras añadir infinitos mensajes sin que se te borre. Luego si lo combinas cn algun detalle mas te va a quedar chetén!
Cualquier duda estoy siempre disponible aquí o por mensaje privado.

[Lossarnach]

Genial ha salido todo correctamente (y captado las sutiles diferencias entre los diferentes métodos del evento document) tienes +1 al kharma y marco esto como respondido, muchas gracias y un saludo.