Tengo el siguiente código:
<div class="container" style="text-align:center;">
<h1 class="text-center">Calculate Areas!</h1>
<div class="init">
<select name="area" class="form-control">
<option value="cuadrado">Cuadrado</option>
<option value="rectangulo">Rectángulo</option>
<option value="circulo">Circulo</option>
<option value="triangulo">Triángulo</option>
</select>
<button type="button" class="form-control btn btn-primary">Move it!</button>
</div>
<div class="meth1" style="display:none;">
<h3>Area de un cuadrado</h3>
<input class="form-control" type="number" id="m1">
<button type="button">Calcular</button>
</div>
<div class="meth2" style="display:none;">
<h3>Area de un rectángulo</h3>
<input class="form-control" type="number" id="m2">
<input class="form-control" type="number" id="m2">
<button type="button">Calcular</button>
</div>
<div class="meth3" style="display:none;">
<h3>Area de un círculo</h3>
<input class="form-control" type="number" id="m3">
<button type="button">Calcular</button>
</div>
<div class="meth4" style="display:none;">
<h3>Area de un triángulo</h3>
<input class="form-control" type="number" id="m4">
<input class="form-control" type="number" id="m4">
<button type="button">Calcular</button>
</div>
</div>
Lo que quiero es que los div (meth1
, meth2
, meth3
y meth4
) aparezcan dinámicamente DEPENDIENDO de la selección hecha con el SELECT
que se ve en el div (init
), pero lo que quiero es que mientras no se haya seleccionado nada en el SELECT
, el código no pueda ser visible o "aún no se haya formado".
Lo puedo dejar con el CSS inline de display:none;
o display:block;
pero cualquiera puede cambiar la visibilidad fácilmente, y además la carga de la página es mayor debido a que carga todos los cuatro div.
¿Es posible crear el código directamente desde jQuery? Para que sólo se muestre el div meth1
si en el SELECT
está "Cuadrado", se muestre meth2
si en el SELECT
está "Rectangulo", y así sucesivamente. He leído algo así sobre createElement
pero no sé.