Tengo un formulario para conocer un presupuesto de acuerdo a que opciones de 3 selects escogan los usuarios.
Lo que me gustaria hacer con javascript es un if que si por ejemplo en el select de servicio esta seleccionado la opcion "Ventana" y que en el select de Milimetraje este seleccionada la opcion "8mm" y que en el ultimo select de Color este seleccionada la opcion "Gris", al apretar el boton de Solicitar Presupuesto, muestre un precio en un div debajo de 450$. Alguna idea?
Lo que he intentado es muy de novato porque no domino aun javascript,
$("#enviar").hide();
function calcularPrecio() {
if ($("#milimetraje option[value='8mm']").attr('selected') && $("#color option[value='Gris']").attr('selected')) {
$('#precio').html("450$");
$("#enviar").show();
}
}
<section class="col-md-12 text-center seccion-calculadora">
<p>Ingrese sus valores para obtener un presupuesto <b id="aproximado-texto">apróximado</b></p>
<div class="container">
<form action="" method="post" role="form" id="formulario-presupuesto">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 col-xs-12">
<input type="text" name="nombre" placeholder="Nombre" >
</div>
<div class="col-md-4 col-xs-12">
<input type="text" name="telefono" placeholder="Teléfono">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 col-xs-12">
<input type="email" name="email" placeholder="Correo" >
</div>
<div class="col-md-4 col-xs-12">
<input type="text" name="ciudad" placeholder="Ciudad" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 col-xs-12">
<select class="form-control" name="abertura" id="abertura" required>
<option disabled selected>¿Que servicio le interesa?</option>
<option value="Ventana Corrediza">Ventana Corrediza</option>
<option value="Puerta Corrediza">Puerta Corrediza</option>
</select>
</div>
<div class="col-md-4 col-xs-12">
<select class="form-control" name="milimetraje" id="milimetraje" required>
<option disabled selected>Milimetraje</option>
<option value="10mm">10 mm (Milimetros)</option>
<option value="8mm">8 mm (Milimetros)</option>
</select>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 col-xs-12">
<select class="form-control" name="color" id="color" required>
<option disabled selected>Escoja el color</option>
<option value="Incoloro">Incoloro</option>
<option value="Bronce">Bronce</option>
<option value="Gris">Gris</option>
</select>
</div>
<div class="col-md-2 col-xs-12">
<input type="text" name="largo" id="largo" placeholder="Largo">
</div>
<div class="col-md-2 col-xs-12">
<input type="text" name="ancho" id="ancho" placeholder="Ancho">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
<div class="col-md-12 div-precio">
<p id="precio" data-placeholder="Precio apróximado"></p>
</div>
</div>
<div class="col-md-4">
<button class="btn btbn-succes btn-calcular" type="button" onclick="calcularPrecio()">Calcular precio</button>
</div>
<div class="col-md-2"></div>
</div>
<div class="row-col-md-12 text-center">
<input type="submit" value="Solicitar presupuesto" name="submit" id="enviar" class="btn-enviar">
</div>
</form>