Foros del Web » Programando para Internet » Javascript » Frameworks JS »

cambiar div segun Select option

Estas en el tema de cambiar div segun Select option en el foro de Frameworks JS en Foros del Web. Hola amigos. Tengo un Formulario y dentro hay un select con 4 opciones quiero que cuando seleccione una de las opciones en un div me ...
  #1 (permalink)  
Antiguo 28/05/2010, 12:47
Avatar de webelgrillo  
Fecha de Ingreso: marzo-2008
Mensajes: 142
Antigüedad: 12 años, 7 meses
Puntos: 0
cambiar div segun Select option

Hola amigos.
Tengo un Formulario y dentro hay un select con 4 opciones quiero que cuando seleccione una de las opciones en un div me muestre su descripcion les dejo el el script.

<form enctype=multipart/form-data action=sube.php method=post>
<div id="tipo">
Tipo: <select name="tags">
<option value="1">uno</option><!-- Si Selecciono uno-->
<option value="2">dos</option>
<option value="3">tres</option>
<option value="4">cuatro</option>
</select>
</div>

<div id="describe">
describe: 1 <!-- que informe que es uno-->
</div>
<div id="boton"><input type="submit" value=subir><br></div>
</form>

Agradecere mucho la ayuda de ustedes como siempre lo hacen.
  #2 (permalink)  
Antiguo 28/05/2010, 14:59
 
Fecha de Ingreso: mayo-2010
Mensajes: 7
Antigüedad: 10 años, 5 meses
Puntos: 1
Respuesta: cambiar div segun Select option

Puedes hacer lo siguiente... utilizando el evento onchange del select. llamas a un metodo javascript que te cambiará el contenido de tu div donde quieres q se muestre la descripcion

Código HTML:
Ver original
  1. <select name="tags" onchange="mostrar(this);" >
  2.         <option value="1">uno</option><!-- Si Selecciono uno-->
  3.         <option value="2">dos</option>
  4.         <option value="3">tres</option>
  5.         <option value="4">cuatro</option>
  6.     </select>
  7.    
  8.     <div id="describe"></div>

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.         function mostrar( obj ){
  3.             var container = document.getElementById("describe") ;
  4.             container.innerHTML = " Item seleccionado.. " + obj[ obj.selectedIndex ].value ;
  5.         }
  6.     </script>



Ahora si lo que quieres es acceder a la base de datos para consultar su descripcion puedes hacer esto..
Solo cambias el metodo mostrar

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.         function getObjectAjax () {
  3.             var xmlHttp ;
  4.             if (window.ActiveXObject) {
  5.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  6.             } else if (window.XMLHttpRequest) {
  7.                 xmlHttp = new XMLHttpRequest();
  8.             }
  9.             return xmlHttp;
  10.         }
  11.        
  12.         function mostrar( obj ){
  13.             var ajax = getObjectAjax();
  14.             var url = "miweb.com/getdescription.php?id=" + obj[ obj.selectedIndex ].value ;
  15.             ajax.open( "post", url );
  16.             ajax.onreadystatechange = function () {
  17.                 if ( ajax.readyState == 4 ) {
  18.                     result = json_decode( ajax.responseText  );
  19.                     var container = document.getElementById("describe") ;
  20.                     container.innerHTML = ajax.responseText ;
  21.                 }
  22.             }
  23.             ajax.send(null);
  24.         }
  25.     </script>

Fijate en tu variable url del metodo mostrar pones la url de un archivo que reciba el id y recupere la descripcion de la base de datos y le haces un echo
algo asi..

Código PHP:
Ver original
  1. <?php
  2. //  .. .. . . .. obteniendo descripcion
  3. $descr = 'algo que saque de la BD' ;
  4. echo $descr ;
  5. ?>


eso es todo..
  #3 (permalink)  
Antiguo 01/06/2010, 10:19
Avatar de webelgrillo  
Fecha de Ingreso: marzo-2008
Mensajes: 142
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: cambiar div segun Select option

gracias por ayudarme.

Código HTML:
<script type="text/javascript">
        function mostrar( obj ){
            var container = document.getElementById("describe") ;
            container.innerHTML = " Item seleccionado.. " + obj[ obj.selectedIndex ].value ;
        }
    </script> 
Código HTML:
<select name="tags" onchange="mostrar(this);" >
        <option value="1">uno</option><!-- Si Selecciono uno-->
        <option value="2">dos</option>
        <option value="3">tres</option>
        <option value="4">cuatro</option>
    </select>
    
    <div id="describe"></div> 
Hasta este punto esta bien -
pero quiero que en el Div me imprima
UNO si es value 1
igualmente escriba DOS si es value 2 y como sigue
gracias por la ayuda.
  #4 (permalink)  
Antiguo 17/07/2011, 10:27
 
Fecha de Ingreso: julio-2010
Mensajes: 91
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: cambiar div segun Select option

Cita:
Iniciado por themitnew Ver Mensaje
Puedes hacer lo siguiente... utilizando el evento onchange del select. llamas a un metodo javascript que te cambiará el contenido de tu div donde quieres q se muestre la descripcion

Código HTML:
Ver original
  1. <select name="tags" onchange="mostrar(this);" >
  2.         <option value="1">uno</option><!-- Si Selecciono uno-->
  3.         <option value="2">dos</option>
  4.         <option value="3">tres</option>
  5.         <option value="4">cuatro</option>
  6.     </select>
  7.    
  8.     <div id="describe"></div>

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.         function mostrar( obj ){
  3.             var container = document.getElementById("describe") ;
  4.             container.innerHTML = " Item seleccionado.. " + obj[ obj.selectedIndex ].value ;
  5.         }
  6.     </script>



Ahora si lo que quieres es acceder a la base de datos para consultar su descripcion puedes hacer esto..
Solo cambias el metodo mostrar

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.         function getObjectAjax () {
  3.             var xmlHttp ;
  4.             if (window.ActiveXObject) {
  5.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  6.             } else if (window.XMLHttpRequest) {
  7.                 xmlHttp = new XMLHttpRequest();
  8.             }
  9.             return xmlHttp;
  10.         }
  11.        
  12.         function mostrar( obj ){
  13.             var ajax = getObjectAjax();
  14.             var url = "miweb.com/getdescription.php?id=" + obj[ obj.selectedIndex ].value ;
  15.             ajax.open( "post", url );
  16.             ajax.onreadystatechange = function () {
  17.                 if ( ajax.readyState == 4 ) {
  18.                     result = json_decode( ajax.responseText  );
  19.                     var container = document.getElementById("describe") ;
  20.                     container.innerHTML = ajax.responseText ;
  21.                 }
  22.             }
  23.             ajax.send(null);
  24.         }
  25.     </script>

Fijate en tu variable url del metodo mostrar pones la url de un archivo que reciba el id y recupere la descripcion de la base de datos y le haces un echo
algo asi..

Código PHP:
Ver original
  1. <?php
  2. //  .. .. . . .. obteniendo descripcion
  3. $descr = 'algo que saque de la BD' ;
  4. echo $descr ;
  5. ?>


eso es todo..
estoy intendao con este ejemplo ajax pero creo que falta alguna clase de ajax cual es la que hace falta??
  #5 (permalink)  
Antiguo 17/07/2011, 14:12
 
Fecha de Ingreso: agosto-2010
Ubicación: Tenerife
Mensajes: 893
Antigüedad: 10 años, 2 meses
Puntos: 202
Respuesta: cambiar div segun Select option

Cita:
Iniciado por patypecas Ver Mensaje
estoy intendao con este ejemplo ajax pero creo que falta alguna clase de ajax cual es la que hace falta??
Clase de Ajax
Si no sabes de Ajax,( aunque el ejemplo es mas javascript que Ajax), lo mejor es que mires algunos tutoriales.
No es necesaria ninguna clase. El ejemplo que ha puesto se entiende muy bien.

Saludos
__________________
Pensaba que internet era una gran biblioteca de sabiduría, hasta que comprendí que un libro no puede tener mil páginas llenas de faltas de ortografía... :(
  #6 (permalink)  
Antiguo 17/07/2011, 18:31
 
Fecha de Ingreso: julio-2010
Mensajes: 91
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: cambiar div segun Select option

perdon la pregunta lo que pasa es que corri el ejemplo tal cual como esta y me sale un error de javascript aqui
result = json_decode( ajax.responseText );

nose si me falta una clase de json algo asi?? porque dice json_decode no esta definido

Etiquetas: ajax, option, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:18.