Seleccionar una opción y muestra lo elegido html con javascript

Seleccionar una opción y muestra lo elegido html con javascript

Seleccionar una opción y muestra lo elegido html con javascript

Seleccionar una opción y muestra lo elegido html con javascript

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 .

Seleccionar una opción y muestra lo elegido html con javascript

Seleccionar una opción y muestra lo elegido html con javascript

 

mejor agencia seo

agencia posicionamiento seo

posicionamiento seo valenica

consultor seo valencia

agencia seo valencia

posicionamiento web valencia

posicionamiento web en valencia

agencia de seo

seo expertos