Diseño web – Seleccionar una opcion y muestra lo elegido

Select option - diseño web

Diseño web – Seleccionar una opcion y muestra lo elegido

Diseño web – Seleccionar una opcion y muestra lo elegido

Hola en esta entrada os voy a mostrar un option que son muy utilizados en los Diseños de paginas web y Tiendas Online dependiendo de la opcion que elija el usuario. de lo que se trata es que el usuario elija un select y dependiendo de lo que elija se muestra. Yo lo voy a enseñar con un programa que estoy haciendo de dietas.

Diseño web  Aquí como veis he echo una función que llama al id pasando un parámetro dependiendo de la opción que elija el usuario.

<script src=”js/jquery/jquery-2.2.4.min.js”></script>
<script type=”text/javascript”>
function mostrar(id) {
if (id == “Desayuno”) {
$(“#desayuno”).show();
$(“#almuerzo”).hide();
$(“#comida”).hide();
$(“#merienda”).hide();
$(“#cena”).hide();
}

if (id == “Almuerzo”) {
$(“#desayuno”).hide();
$(“#almuerzo”).show();
$(“#comida”).hide();
$(“#merienda”).hide();
$(“#cena”).hide();
}

if (id == “Comida”) {
$(“#desayuno”).hide();
$(“#almuerzo”).hide();
$(“#comida”).show();
$(“#merienda”).hide();
$(“#cena”).hide();
}

if (id == “Merienda”) {
$(“#desayuno”).hide();
$(“#almuerzo”).hide();
$(“#comida”).hide();
$(“#merienda”).show();
$(“#cena”).hide();
}
if (id == “Cena”) {
$(“#desayuno”).hide();
$(“#almuerzo”).hide();
$(“#comida”).hide();
$(“#merienda”).hide();
$(“#cena”).show();
}
}
</script>

Ahora lo que hago es llenar un select desde bbdd y con la funcion onChange cazamos el value.

<div class=”col-sm-10 col-sm-offset-1″>
<div class=”form-group”>
<div class=”col-sm-10″>
<select name=”class” class=”form-control” id=”class” onChange=”mostrar(this.value);”>
<option value=””>Elige una Comida</option>
<option value=”Desayuno” <?php if ($class == Desayuno ) echo ‘selected’; ?> >Desayuno</option>
<option value=”Almuerzo” <?php if ($class == Almuerzo ) echo ‘selected’; ?> >Almuerzo</option>
<option value=”Comida” <?php if ($class == Comida ) echo ‘selected’; ?> >Comida</option>
<option value=”Merienda” <?php if ($class == Merienda ) echo ‘selected’; ?> >Merienda</option>
<option value=”Cena” <?php if ($class == Cena ) echo ‘selected’; ?> >Cena</option>
</select>
</div>
</div>
</div>

<!– 1opcion –>
<div class=”col-sm-10 col-sm-offset-1″ id=”desayuno” style=”display: none;”>
<div class=”form-group”>
<div class=”col-sm-10″>
<select name=”1opcion” class=”form-control” id=”class” >
<?php
$query = $link -> query (“SELECT * FROM desayuno”);
while ($valores = mysqli_fetch_array($query)) {
echo ‘<option >1 Combinacion</option>’;
echo ‘<option value=”‘.$valores[nombre].'”>’.$valores[nombre].'</option>’;
}
?>
</select>
</div>

</div>

<div class=”col-sm-10 col-sm-offset-1″ id=”almuerzo” style=”display: none;”>
<div class=”form-group”>
<div class=”col-sm-10″>
<select name=”1opcion” class=”form-control” id=”class” >
<?php
$query = $link -> query (“SELECT * FROM desayuno”);
while ($valores = mysqli_fetch_array($query)) {
echo ‘<option >1 Combinacion</option>’;
echo ‘<option value=”‘.$valores[nombre].'”>’.$valores[nombre].'</option>’;
}
?>
</select>
</div>
</div>

Diseño web

Y con esto ya tendríamos la funcionalidad .

 

No Comments

Sorry, the comment form is closed at this time.