14 Jul 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.

  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>

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