Selector HTML y jQuery para mostrar diferentes elementos

He estado realizando algunos trabajos de programación web y dentro de las necesidades, existe una muy importante, que el sistema sea lo más intuitivo posible, para lo que se crearon algunos selectores para que el usuario elija una opción y posteriormente se despliegue una información específica de lo que eligió sin muchos traumas.

Hice un pequeño combo con la ayuda de jQuery, quedando de la siguiente manera:

<html>
	<head>
		<script src="jquery.js"></script>
	</head>
	<script type="text/javascript">
		$(function() {
			$('#selector').change(function(){
				$('.elementos').hide();
				$('#' + $(this).val()).show();
			});
		});
	</script>
	<select id="selector">
		<option value="este">Este</option>
		<option value="aquel">Aquel</option>
		<option value="otro">Otro</option>
	</select>
	<div id="este" class="elementos" style="display:none">
		<table>
			<tr>
				<td>Fuerza 1</td>
				<td>Fuerza 2</td>
				<td>Fuerza 3</td>
			</tr>
			<tr>
				<td>Poder 1</td>
				<td>Poder 2</td>
				<td>Poder 3</td>
			</tr>
		</table>
	</div>
	<div id="aquel" class="elementos" style="display:none">
		<h4>Aquel</h4>
	</div>
	<div id="otro" class="elementos" style="display:none">
		<h5>Otro</h5>
	</div>
</html>

Una vez el usuario elige su opción se mostrará sólo lo que eligió, es independiente el elemento que se utilice en lo que se quiere desplegar luego.

Como nota importante, se debe tener en cuenta el archivo jquery.js que se puede descargar de su web oficial.

Advertisements
This entry was posted in HTML, jQuery. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s