Lista de selección para mostrar una info

oskarmp · #1 (**permalink**) 13/10/2010, 08:00

Hola a todos.

Tengo un problema, necesito crear una lista deplegable que al seleccionar una opción me muestre en cierta información.

Lo que quiero hacer es una lista con Códigos postales y que al seleccionar uno de ellos me muestre la información (dirección, nombre, telefono) de un centro de ventas.

Seria algo parecido a esto pero que la caja que contiene la información no se vea, que se vea solo el texto con el fondo transparente. Se haría con DIV's?

Código:

<html> 
<head> 
	<title>formularios - javascript y listas de selecci&oacute;n - ejemplo 2</title> 
</head> 
 
<body bgcolor="#ffff99"> 
<center> 
<table border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0"> 
        <tr> 
          <td width="100%" align="center"><select name="selectbox" size="1" onChange="changecontent(this)"> 
            <option selected value="What is JavaScript?">uno</option> 
            <option value="Why learn JavaScript?">dos</option> 
            <option value="The difference between JavaScript and Java">tr&eacute;s</option> 
            <option value="What is DHTML?">cuatro</option> 
          </select><br> 
          </td> 
        </tr> 
        <tr> 
          <td width="100%"><textarea rows="8" name="contentbox" cols="35" wrap="virtual"></textarea> 
          </td> 
        </tr> 
      </table> 
    </form> 
    </td> 
  </tr> 
</table> 
</center> 
<p> 
 
<script language="JavaScript" type="text/javascript"> 
 
//change contents of message box, where the first one corresponds with the first drop down box, second with second box etc
var thecontents=new Array()
 
thecontents[0]='Esta es la explicacion de la opcion primera'
 
thecontents[1]='Y esta es la explicacion de la segunda'
 
thecontents[2]='Aqui ira el comentario a la tercera opcion'
 
thecontents[3]='Y por utimo el de la cuarta. ?A que es bonito...?'
 
 
//don't edit pass this line
 
function changecontent(which){
document.ddmessage.contentbox.value=thecontents[which.selectedIndex]
}
 
document.ddmessage.contentbox.value=thecontents[document.ddmessage.selectbox.selectedIndex]
</script> 
 
</body> 
</html>

Muchísimas gracias ! Un Saludo.

emprear · #2 (**permalink**) 13/10/2010, 09:50

oskarmp:

primero darle estilo al textarea

<style type="text/css">
textarea{
border: 0px;
overflow: hidden;
background-color: transparent;
}
</style>

segundo, para el correcto funcionamiento de onchange(), te convendria crear un primer elemento, con value="" y que cargue por defecto con selected="selected", ya que el onchange() se produce cuando hay un cambio

Ejemplo:
http://foros.emprear.com/jsdemo/combo/combo.html

Al hacer esto tenes que modificar tu array el el javascript y que quede

thecontents[0]=''

thecontents[1]='Esta es la explicacion de la opcion primera'

thecontents[2]='Y esta es la explicacion de la segunda'

thecontents[3]='Aqui ira el comentario a la tercera opcion'

thecontents[4]='Y por utimo el de la cuarta. ?A que es bonito...?'

Saludos

oskarmp · #3 (**permalink**) 18/10/2010, 12:39

Muchas gracias! Era justamente lo que queria.

Un Saludo.