[SOLUCIONADO] Mostrar div previamente seleccionado

julslash · #1 (**permalink**) 05/09/2014, 09:35

Hola tengo el siguiente problema hice este codigo para probar que estoy haciendo mal de forma mas facil

quiero hacer lo siguiente:
traerme un valor de la base de datos que bien puede ser (1,2 ó 3) para asi mostrar el div que corresponde a ese numero

en el ejemplo que coloque aqui lo hace pero solo al modificar el select,
lo que yo quiero es que al abrir la pagina me muestre el select previo segun el valor de la base de datos y luego si poder modificar la opcion del select en caso de yo querer mostrar otro div

que puedo hacer en este caso?

Código HTML:


  <html>
    <head>

	
    <script type="text/javascript">
    function mostrar() {
	var valorinvisible=0;
	valorinvisible=eval(document.getElementById('select').value); // VALOR DEL SELECT
	
	if (valorinvisible==1){
    document.getElementById('e1').style.display ='inherit';
	document.getElementById('e2').style.display ='none';
    document.getElementById('e3').style.display ='none';
	
	}
	
	else if (valorinvisible==2){
	 document.getElementById('e2').style.display ='inherit';
	 document.getElementById('e1').style.display ='none';
     document.getElementById('e3').style.display ='none';
	}
	
	else if (valorinvisible==3){
	 document.getElementById('e3').style.display ='inherit';
	 document.getElementById('e2').style.display ='none';
     document.getElementById('e1').style.display ='none';
	}
	
    }
    </script>
    </head>
	
    <form id='alta' name='nalta' method="post" >

	  
     
    <select id="select" onchange='mostrar()'>
    <option value="1">uno</option>
    <option value="2">dos</option>
    <option value="3">tres</option>
    </select>
     <br>
	    <table>

	 
	  <tr>
     <td>
	 
	 
	 <div id="e1" style="display:none"> <!---DIV INVISIBLE 1---> 
     
	 
     <font  style="color:#ff3000;">
	   hola 1
	</font>
	
	
    </div> <!---FIN DIV INVISIBLE 1---> 
	
	
    </td>
     </tr>
	 
	   <tr>
     <td>
	 
	 
    <div id="e2" style="display:none"> <!---DIV INVISIBLE 2---> 
     
    
	   <font  style="color:#ff3000;">
	   hola 2
	</font>
					
	
 
    </div> <!--- FIN DIV INVISIBLE 2---> 
	
	
	 </td>
     </tr>
	 
	 
	  <tr>
     <td>
	 
	 
    <div id="e3" style="display:none"> <!---DIV INVISIBLE 3---> 
    
	  <font  style="color:#ff3000;">
	   hola 3
	</font>
					
    </div> <!---FIN DIV INVISIBLE 3---> 
	
	
	 </td>
     </tr>
	  <table>
	
	
    </form>
    </body>
    </html>

Alexis88 · #2 (**permalink**) 05/09/2014, 11:30

¿Y cómo es que recibes al valor de la BD?

julslash · #3 (**permalink**) 05/09/2014, 13:40

Normal a una variable en PHP

Por ejemplo hago la consulta y tomo el valor
$variable= $row['hola'];

En este caso el ejemplo que escribí puede ser cualquiera de los 3 valores 1 2 o 3. Yo después me encargaría de adaptarlo al otro código muchisimo mas complejo.

Solo quiero que ya al abrir la pagina cargue uno de esos 3 valores automáticamente

Alexis88 · #4 (**permalink**) 05/09/2014, 15:02

Se me ocurre que con ayuda de un bucle generes a los <div> y en cada iteración, compares el valor obtenido de la BD con el de la iteración actual, es decir:

Código PHP:

Ver original<?php
for ($i = 1; $i < 4; $i++){
    if ('e' . $i == $variable) $clase = 'visible';
    else $clase = 'invisible';
?>
    <div id = "e<?php echo $i; ?>" class = "<?php echo $clase; ?>"></div>
<?php
}
?>

Y en tu hoja de estilos, crees dos clases: 'visible' e 'invisible'. En la primera, la propiedad display tendrá por valor block y en la segunda, none.

Código CSS:

Ver original.visible{
    display: block;
}
 
.invisible{
    display: none;
}

También podrías hacerlo con JavaScript:

Código Javascript:

Ver originaldocument.querySelector(".visible").style.display = "block";

Y todos los demás elementos <div> tendrías que estar previamente ocultos desde la hoja de estilos, sin embargo, la primera forma es la más eficiente y recomendada por tratarse de la manipulación de estilos.

Saludos

julslash · #5 (**permalink**) 08/09/2014, 11:07

alexis88 gracias me diste una idea y use parte de tu codigo

aqui coloco el codigo completo 100 % funcionando

Código HTML:

    <html>
    <head>

	
    <script type="text/javascript">
    function mostrar() {
	var valorinvisible=0;
	valorinvisible=eval(document.getElementById('select').value); // VALOR DEL SELECT
	
	if (valorinvisible==0){
    document.getElementById('e1').style.display ='inherit';
	document.getElementById('e2').style.display ='none';
    document.getElementById('e3').style.display ='none';
	
	}
	
	else if (valorinvisible==1){
	 document.getElementById('e2').style.display ='inherit';
	 document.getElementById('e1').style.display ='none';
     document.getElementById('e3').style.display ='none';
	}
	
	else if (valorinvisible==2){
	 document.getElementById('e3').style.display ='inherit';
	 document.getElementById('e2').style.display ='none';
     document.getElementById('e1').style.display ='none';
	}
	
    }
    </script>
	
	<style type="text/css">
		body {
		color: purple;
		background-color: #d8da3d;
		}
	
	.visible{
        display: inherit;
    }
     
    .invisible{
        display: none;
    }
		
	</style> 
	
	
    </head>
	<body >
	
	<?php
	$valor=3; // Valor que quiere mostrar inicialmente, puede ser sustituido por uno de la base de datos
	
	?>
	
    <form id='alta' name='nalta' method="post" >

	  
     
    <select id="select" onchange='mostrar()'>
    <option value="0">uno</option>
    <option value="1">dos</option>
    <option value="2">tres</option>
    </select>
     <br>
	    <table>

		
		
		
		
		
	 
	  <tr>
     <td>
	 
	 <?php
	 if($valor==1){
	 $clase = 'visible';
	 }
	 else
	 {
	 $clase = 'invisible';
	 }
	 ?>
	 
	 <div id="e1" class = "<?php echo $clase; ?>"> <!---DIV INVISIBLE 1---> 
     
	 
     <font  style="color:#ff3000;">
	   hola 1
	</font>
	
	
    </div> <!---FIN DIV INVISIBLE 1---> 

	
	
    </td>
     </tr>
	 
	 
	 
	 
	 
	 
	 
	 
	   <tr>
     <td>
	 
	 <?php
	 if($valor==2){
	 $clase = 'visible';
	 }
	 else
	 {
	 $clase = 'invisible';
	 }
	 ?>
	 
	 
    <div id="e2" class = "<?php echo $clase; ?>"> <!---DIV INVISIBLE 2---> 
     
    
	   <font  style="color:#ff3000;">
	   hola 2
	</font>
					
	
 
    </div> <!--- FIN DIV INVISIBLE 2---> 
	

	 
	 </td>
     </tr>
	 
	 
	 
	 
	 
	  <tr>
     <td>
	 

	 <?php
	 if($valor==3){
	 $clase = 'visible';
	 }
	 else
	 {
	 $clase = 'invisible';
	 }
	 ?>
	 
	 
    <div id="e3" class = "<?php echo $clase; ?>"> <!---DIV INVISIBLE 3---> 
    
	  <font  style="color:#ff3000;">
	   hola 3
	</font>
					
    </div> <!---FIN DIV INVISIBLE 3---> 
	
   
	 
	 </td>
     </tr>
	  <table>
	
	
    </form>
    </body>
    </html>

Alexis88 · #6 (**permalink**) 08/09/2014, 11:45

No es necesario el uso de eval, menos de esa forma pues, si un usuario editara el valor del combo desde el panel de herramientas de desarrollo, terminaría ejecutándose un posible código malicioso. Por otro lado, para el mostrado y ocultamiento de los elementos con JavaScript, se me ocurre una solución más práctica:

Código Javascript:

Ver originalvar divs = document.getElementsByTagName("div"),
    total = divs.length;
 
function mostrar(id) {
    for (var i = 0; i < total; i++){
        divs[i].className = divs[i].id == id ? "visible" : "invisible";
    }
}

Esta parte es sencilla. Tomo a los elementos <div> y a la función le paso el valor seleccionado en el combo, el cual debe de ser uno de los id de los elementos <div>. En la función, recorro al conjunto de elementos <div> y, en cada iteración, comparo el id de cada uno de ellos con el valor recibido; si coinciden, cambio el nombre de la clase del elemento <div> actual por 'visible', caso contrario, por 'invisible'. Para esto, tu combo tendrá que tener esta forma:

Código HTML:

Ver original<select id = "select" onchange = "mostrar(this.value)">
        <option value = "e1">Uno</option>
        <option value = "e2">Dos</option>
        <option value = "e3">Tres</option>
</select>

Como verás, solo cambié los valores de las opciones por los id de los elementos <div> y, en la llamada a la función, envío el valor seleccionado en el combo. La ventaja de hacerlo de esta manera es que, aunque tengas más o menos elementos <div>, no tendrás que aumentar o disminuir código en la función, siempre funcionará.

Saludos