JavaScript - Mostrar contenido de select-option en un input text

Mostrar contenido de select-option en un input text

Publicado por Sam (106 intervenciones) el 15/07/2014 09:54:07

Hola amigos, a ver si alguien puede ayudarme con esto:

Tengo un codigo que es capaz de seleccionando una option de un combobox, mostrar su

resultado en un input text.

Hasta ahí todo funciona bien ya que muestra en el input el "value" que proviene de la option del select.

Pero es que lo que necesito es que muestre en el input, no el valor del value de la option, sino el "contenido"

que hay entre "<option> contenido </option>"

Este es el codigo:

<script>

var mostrarValor = function(x){
document.getElementById('comida').value=x;
}

</script>

<html>

<form action="#">

<select name="elejir_comida" onchange="mostrarValor(this.value);">

<option value="1">Pizza</option>
<option value="2">Hamburguesa</option>
<option value="3">Kebab</option>

</select>

<input type="text" name="comida" id="comida" value="" />

</form>

<html/>

Gracias de antemano.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Mostrar contenido de select-option en un input text

Publicado por sam (106 intervenciones) el 15/07/2014 11:33:27

Una cosa que se me habia olvidado decir:

Si la solucion pasara obligatoriamente por jquery , agradeceria que fuera con una version a partir de la 1.10.1

ya que tengo otras partes añadidas que me funcionan con esta version y me entra en conflicto si añado determinadas versiones diferentes.

Grasiah

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Mostrar contenido de select-option en un input text

Publicado por sam (106 intervenciones) el 15/07/2014 20:17:08

Pero acabo de darme cuenta (fallo mio lo adminto), que necesito algo mas, me explico

vereis lo que realmente necesito es que ademas tambien llegue el value.

Cada option tiene su valor en el value y su contenido literal ejemplo "hamburguesa, kebab etc".

Pues lo que necesito, y por desgracia no se hacer es; al seleccionar una option, se carguen a la vez su value en un input y su literal en otro input ambas cosas como digo a la vez al seleccionar la option.

ahora si me he explicao bien. :-)

Valora esta respuesta

Comentar

Pos: 14

Val: 183

Mostrar contenido de select-option en un input text

Publicado por Yamil Bracho (78 intervenciones) el 15/07/2014 20:28:38

Usa JQuery y en la funcion mostrarValor la cambias a

var mostrarValor = function(x){
$('comida').text($('#elejir_comida:selected').text());
}

colocale al select el id="elejir_comida"

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Mostrar contenido de select-option en un input text

Publicado por xve (2100 intervenciones) el 15/07/2014 20:31:05

Aqui te adjunto como obtener el value y el text...

<script>

var mostrarValor = function(x){

	alert("El valor: "+x.value+" y el texto: "+x.options[x.selectedIndex].text);

</script>

<form action="#">

	<select name="elejir_comida" onchange="mostrarValor(this);">

		<option value="1">Pizza</option>

		<option value="2">Hamburguesa</option>

		<option value="3">Kebab</option>

	</select>

</form>

Espero que te sirva.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Mostrar contenido de select-option en un input text

Publicado por xve (2100 intervenciones) el 15/07/2014 20:24:33

Hola Sam, tal cual lo tienes, ya llamas a la función mostrarValor() pasando como parámetro el value...

Modifica tu función para que quede así... veras como te muestra su valor...

var mostrarValor = function(x){

	alert(x);

y en el select, en vez de enviar this.value, simplemente envia this... algo así:

<select name="elejir_comida" onchange="mostrarValor(this);">

Valora esta respuesta

Comentar

Mostrar contenido de select-option en un input text

Publicado por sam (106 intervenciones) el 15/07/2014 20:53:51

Hola xve, me sirve a la perfección el codigo que has puesto:

<script>

var mostrarValor = function(x){

alert("El valor: "+x.value+" y el texto: "+x.options[x.selectedIndex].text);

}

</script>

Pero me has dejado con la miel en la boca, veras es esto mismo pero en vez de mostrar los dos valores en una ventana emergente con un "alert", lo que necesito es que me muestre losdos valores en dos inputs uno con el value y otro con el contenido pizza (por ejemplo).

Valora esta respuesta

Comentar

Mostrar contenido de select-option en un input text

Publicado por Sam (106 intervenciones) el 15/07/2014 23:56:04

XVE, esta te la dedico a ti, a no ser que tengas un as debajo de la manga con una solucion mejor que la que voy a poner.

Para mostrar el value y el contenido del option a la misma vez.

Pero mostrandose los valores, no con alert, sino dentro de 2 inputs, seria de la siguiente manera:

<script>

    var mostrarValor = function(x){

            document.getElementById('comida').value=x;

    var mostrarValor2 = function(x){

            document.getElementById('comida2').value=x;

</script>

<html>

<form action="#">

<select name="elejir_comida" onchange="mostrarValor(this.options[this.selectedIndex].innerHTML); mostrarValor2(this.value);">

<option value="1">Pizza</option>

<option value="2">Hamburguesa</option>

<option value="3">Kebab</option>

</select>

<br/>

<input type="text" name="comida" id="comida" value="" />

<br/>

<input type="text" name="comida2" id="comida2" value="" />

</form>

Si ves que se pudiera pulir de alguna manera xve, dimelo, pero funcionar funciona. :-)

Valora esta respuesta

Comentar

Mostrar contenido de select-option en un input text

Publicado por Sam (106 intervenciones) el 16/07/2014 21:44:36

Bueno, funciona, si pero ahora me doy cuenta que necesito una cosa mas derivada de la solucion anterio que he puesto, a ver si alguien me puede ayudar que no doy con la solucion y llevo to el dia para el siguente problema:

Tengo un select asi:

<select name="lista_cursos" id="lista_cursos[]" class="estilo_combo_id_curso" onchange="mostrarValor(this.options[this.selectedIndex].innerHTML, this.value)">

	<?php

	while (

		($fila=mysql_fetch_array($res_1)) or

		($fila=mysql_fetch_array($res_2)) or

		($fila=mysql_fetch_array($res_3)) or

		($fila=mysql_fetch_array($res_4)) or

		($fila=mysql_fetch_array($res_5)) or

		($fila=mysql_fetch_array($res_6)) or

		($fila=mysql_fetch_array($res_7))

) {

	$id_curso = $fila['id_curso'];

	$nombre_curso = $fila['nombre_curso'];

	$comentario = $fila['comentario'];

?>

	 <option value="<?php echo $id_curso ?>"><?php echo $nombre_curso ?> <?php echo $comentario ?></option>

	<?php }; ?>

</select>

El cual pasa el value = "id_curso" y el contenido del option "$nombre_curso", perfectamente a campos inputs,

mediante:

<script type="text/javascript">

	var mostrarValor = function(x, y, z){

	document.getElementById('lista_cursos').value=x;

    document.getElementById('id_curso').value=y;

    document.getElementById('comentario').value=z;

</script>

Pero no consigo pasar a un campo input el valor de "comentario"

y es vital por que tengo que pasar a parte de comentario, mas campos. Si me pudieran ayudarme con este campo el resto que falta por implementar ya podria hacerlos yo.

Gracias de antemano.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Mostrar contenido de select-option en un input text

Publicado por xve (2100 intervenciones) el 17/07/2014 09:09:30

Hola Sam, según veo, el campo $nombre_curso y $comentario, están juntos en el texto del <option>, no? entiendo que al pasar el valor por: this.options[this.selectedIndex].innerHTML ya te debería de pasar los dos valores...

No se si no lo he entendido bien...

Valora esta respuesta

Comentar

Mostrar contenido de select-option en un input text

Publicado por sam (106 intervenciones) el 17/07/2014 23:18:46

Si, al final he resuelto el 75% del problema, dicho de otro modo lo he solucionado pero me queda un hilo por atar te explico:

Lo he solucionado haciendo esto:

<option value="<?php echo $id_curso ?>"><?php echo $nombre_curso ?>|<?php echo $comentario ?></option>

Osea uniendo nombre_curso con comentario mediante un ' | '

Y en el otro archivo que recibe estos valores he puesto esto:

<script type="text/javascript">

var mostrarValor = function(x, y){

var split = x.split("|");

document.getElementById('id_curso').value = y;

document.getElementById('lista_cursos').value = split[0]; //El nombre del curso
document.getElementById('comentario').value = split[1];

</script>

Con esto el problema esta resuelto totalmente y llegan los 3 datos perfectamente.

Pero me queda un flejo suelto y es que cuando despliego el combobox , imaginate que despliego el curso llamado

"photoshop" , pues lo que me sale es esto:

photoshop |

osea el curso con la barra vertical esta.

Y se cual es la solucion, bueno 2 soluciones:

La primera usar seudoclases para pasar los valores de un archivo a otro sin que se muestren en el combobox

Pero esa solucion me genera otros problemas diferentes que ahora no vienen al caso.

Y la solucion "original pero creo que funcionaria" pasa por dar estilos aunque suene raro.

Pero no se como hacerlo te explico:

Como podria hacer que parte del contenido (no el value) de una option pudiera cambiarle el color .

Un ejemplo:

si dentro de una option hay esto:

<option value=""> Me gusta comer</option>

Como puedo yo hacer para que la palabra "comer" salga de color rojo

Gracias :-)

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Mostrar contenido de select-option en un input text

Publicado por xve (2100 intervenciones) el 18/07/2014 08:48:30

Hola Sam, hasta donde yo se, no puedes cambiar el color de parte de un <option>... si puedes cambiar el color de todo el contenido pero de una parte creo que no.

Lo que si que puedes hacer, es crearte tu propio desplegable con javascript, aunque ello ya es un poco mas complicado.

Valora esta respuesta

Comentar

Mostrar contenido de select-option en un input text

Publicado por sam (106 intervenciones) el 18/07/2014 14:54:13

Entonces solo fue un espejismo lo del css .

Solo me queda entonces la salida de las seudo clases pero para variar no me va.

Dame un punto de apollo y podre resolver el resto please.

Mira este esta es la prueba de las seudo clases que tengo, si hago que funcione, bueno si me ayudas, podre implementarla en el trabajo que llevo entre manos.

La idea es que seleccionando la option del combobox, los 3 valores que lleva (el value, el data-comentario y el contenido del option), se vean reflejados en los inputs que te paso:

<select
name="lista_cursos"
id="lista_cursos[]"
class="estilo_combo_id_curso"
onchange="mostrarValor(
this.options[this.selectedIndex].innerHTML,
this.value,
this.options[this.selectedIndex].getAttribute("data-comentario")
)"
>

<option value="1">seleccionar</option>
<option value="2" data-comentario="instructivo">photoshop</option>

</select>

<script>

var mostrarValor = function(x, y, z) {

document.getElementById('lista_cursos').value = x; //El nombre del curso
document.getElementById('id_curso').value = y;
document.getElementById('comentario').value = z; //El comentario

}

</script>

<br/>
<br/>
<br/>

<div class="lista_cursos">NOMBRE DEL CURSO</div>

<input type="text" name="lista_cursos" placeholder="Modificar nombre del curso" value=""

id="lista_cursos" size="43" maxlength="100" autocomplete="on" title=""/>

<br/>
<br/>
<br/>

<div class="comentario">COMENTARIO</div>

<input type="text" name="lista_cursos" placeholder="Modificar nombre del curso" value=""

id="lista_cursos" size="43" maxlength="100" autocomplete="on" title=""/>

<br/>
<br/>
<br/>

<input type="text" name="id_curso" placeholder="Id curso" value=""

id="id_curso" size="43" maxlength="100" autocomplete="on" title=""/>

Valora esta respuesta

Comentar

Combos select cambiantes

higthchar