select con texto e imagenes
Publicado por jose luis (1 intervención) el 15/11/2014 20:06:17
estoy atascado con un problema con un select de un formulario
al pinchar en cualquier opción del select debe mostrar el value en una caja y una imagen en otra
he conseguido que si son 2 textos si los muestre en 2 cajas diferentes, pero al tratar de imagenes, o bien muestra el texto o la imagen
este es el código que muestra las imágenes, en el text area donde muestra la url de la imagen debería mostrar el value del option
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>cambio de imagen</title>
</head>
<body>
<form name="ddmessage">
<select name="selectbox" size="4" onChange="changecontent(this)">
<option value="Ain">Ain</option>
<option value="albocacer">Albocacer</option>
<option value="alcora">Alcora</option>
<option value="almassora">Almazora</option>
</select><br><br><br>
<textarea rows="8" name="contentbox" id="nivel" cols="35" wrap="virtual"></textarea><br>
</form>
<img name="imagen" src=""/>
<script language="JavaScript">
var thecontents=new Array()
thecontents[0]='escudos/ain.png'
thecontents[1]='escudos/albocacer.png'
thecontents[2]='escudos/alcora.png'
thecontents[3]='escudos/almassora.png'
function changecontent(which){
imagen.src = thecontents[document.ddmessage.selectbox.selectedIndex]
/*podes eliminar esta linea junto con el contentbox, es solo para mostrar el resultado*/
document.ddmessage.contentbox.value= thecontents[document.ddmessage.selectbox.selectedIndex]
}
</script>
</body>
</body>
</html>
y este es donde me muestra los 2 value del option
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
</head>
<body>
<form id="poblaciones" name="poblaciones" >
<select size="5" onChange="document.getElementById('nivel').value = this.options[this.selectedIndex].value.split(',')[0];document.getElementById('nivel2').value = this.options[this.selectedIndex].value.split(',')[1]">
<option value="1,escudos/ain.png"> 1</option>
<option value="2,B"> 2</option>
<option value="3,C"> 3</option>
<option value="4,D"> 4</option>
<option value="5,E"> 5</option>
</select>
<input type="text" id="nivel" name="nivel">
<input type="text" id="nivel2" name="nivel2" style="width:300px;height:300px;">
</body>
</html>
de antemano agradezco la ayuda, porque no doy con la solución
saludos y gracias
al pinchar en cualquier opción del select debe mostrar el value en una caja y una imagen en otra
he conseguido que si son 2 textos si los muestre en 2 cajas diferentes, pero al tratar de imagenes, o bien muestra el texto o la imagen
este es el código que muestra las imágenes, en el text area donde muestra la url de la imagen debería mostrar el value del option
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>cambio de imagen</title>
</head>
<body>
<form name="ddmessage">
<select name="selectbox" size="4" onChange="changecontent(this)">
<option value="Ain">Ain</option>
<option value="albocacer">Albocacer</option>
<option value="alcora">Alcora</option>
<option value="almassora">Almazora</option>
</select><br><br><br>
<textarea rows="8" name="contentbox" id="nivel" cols="35" wrap="virtual"></textarea><br>
</form>
<img name="imagen" src=""/>
<script language="JavaScript">
var thecontents=new Array()
thecontents[0]='escudos/ain.png'
thecontents[1]='escudos/albocacer.png'
thecontents[2]='escudos/alcora.png'
thecontents[3]='escudos/almassora.png'
function changecontent(which){
imagen.src = thecontents[document.ddmessage.selectbox.selectedIndex]
/*podes eliminar esta linea junto con el contentbox, es solo para mostrar el resultado*/
document.ddmessage.contentbox.value= thecontents[document.ddmessage.selectbox.selectedIndex]
}
</script>
</body>
</body>
</html>
y este es donde me muestra los 2 value del option
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
</head>
<body>
<form id="poblaciones" name="poblaciones" >
<select size="5" onChange="document.getElementById('nivel').value = this.options[this.selectedIndex].value.split(',')[0];document.getElementById('nivel2').value = this.options[this.selectedIndex].value.split(',')[1]">
<option value="1,escudos/ain.png"> 1</option>
<option value="2,B"> 2</option>
<option value="3,C"> 3</option>
<option value="4,D"> 4</option>
<option value="5,E"> 5</option>
</select>
<input type="text" id="nivel" name="nivel">
<input type="text" id="nivel2" name="nivel2" style="width:300px;height:300px;">
</body>
</html>
de antemano agradezco la ayuda, porque no doy con la solución
saludos y gracias
Valora esta pregunta
0