06/08/2017, 00:57
|
 | | | Fecha de Ingreso: mayo-2015 Ubicación: México, Sonora.
Mensajes: 180
Antigüedad: 8 años, 11 meses Puntos: 0 | |
| Respuesta: Cambiar la imagen de pendiendo la seleccionada
Código:
function sel_rango(value) //lo que pasa cuando se selecciona un rango
{
$('#calidad').val('').change();
var select=document.getElementById("calidad");
var op=select.getElementsByTagName("option");
$('#estiloP').val('').change();
var select=document.getElementById("estiloP");
var op_P=select.getElementsByTagName("option");
$('#colorPers').val('').change();
var select=document.getElementById("colorPers");
var op_Pers=select.getElementsByTagName("option");
if(value==''){
for (var i = 1; i < op.length; i++) op[i].style.display="none";
for (var i = 1; i < op_P.length; i++) op_P[i].style.display="none";
for (var i = 1; i < op_Pers.length; i++) op_Pers[i].style.display="none";
}else if(value=='250'){
op[1].style.display="block";
op[2].style.display="none";
op[3].style.display="none";
op[4].style.display="none";
for (var i = 5; i < op.length; i++) op[i].style.display="none";
}else if(value=='351'){
op[2].style.display="block";
op[3].style.display="block";
op[4].style.display="block";
op[1].style.display="none";
for (var i =5 ; i < op.length; i++) op[i].style.display="none";
}else if(value=='300'){
for (var i = 1; i < 5; i++) op[i].style.display="none";
op[5].style.display="block";
for (var i = 6; i < op.length; i++) op[i].style.display="none";
}else if(value=='451'){
for (var i = 1; i < 6; i++) op[i].style.display="none";
op[6].style.display="block";
for (var i = 7; i < op.length; i++) op[i].style.display="none";
}else if(value=='601_1'){
for (var i = 1; i < 7; i++) op[i].style.display="none";
op[7].style.display="block";
for (var i = 8; i < op.length; i++) op[i].style.display="none";
}else if(value=='751'){
for (var i = 1; i < 8; i++) op[i].style.display="none";
op[8].style.display="block";
for (var i = 9; i < op.length; i++) op[i].style.display="none";
}else if(value=='951'){
for (var i = 1; i < 9; i++) op[i].style.display="none";
op[9].style.display="block";
for (var i = 10; i < op.length; i++) op[i].style.display="none";
}else if(value=='1101'){
for (var i = 1; i < 10; i++) op[i].style.display="none";
op[10].style.display="block";
for (var i = 11; i < op.length; i++) op[i].style.display="none";
}else if(value=='1250'){
for (var i = 1; i < 11; i++) op[i].style.display="none";
op[11].style.display="block";
for (var i = 12; i < op.length; i++) op[i].style.display="none";
}else if(value=='450'){
op_P[1].style.display="block";
op_P[2].style.display="none";
op_P[3].style.display="none";
}else if(value=='450_2'){
op_P[2].style.display="block";
op_P[1].style.display="none";
op_P[3].style.display="none";
}else if(value=='601_2'){
op_P[3].style.display="block";
op_P[1].style.display="none";
op_P[2].style.display="none";
}else if(value=='350'){
for (var i = 1; i < 13; i++) op[i].style.display="none";
op[12].style.display="block";
for (var i = 14; i < op.length; i++) op[i].style.display="none";
}else if(value=='401'){
for (var i = 1; i < 13; i++) op[i].style.display="none";
for (var i = 13; i < 15; i++) op[i].style.display="block";
for (var i = 15; i < op.length; i++) op[i].style.display="none";
}else if(value=='500'){
for (var i = 1; i < 15; i++) op[i].style.display="none";
op[15].style.display="block";
for (var i = 16; i < op.length; i++) op[i].style.display="none";
}else if(value=='551'){
for (var i = 1; i < 16; i++) op[i].style.display="none";
op[16].style.display="block";
for (var i = 17; i < op.length; i++) op[i].style.display="none";
}else if(value=='600'){
for (var i = 1; i < 17; i++) op[i].style.display="none";
op[17].style.display="block";
for (var i = 18; i < op.length; i++) op[i].style.display="none";
}else if(value=='700'){
for (var i = 1; i < 18; i++) op[i].style.display="none";
op[18].style.display="block";
for (var i = 19; i < op.length; i++) op[i].style.display="none";
}else if(value=='1000'){
for (var i = 1; i < 4; i++) op_Pers[i].style.display="block";
for (var i = 4; i < op.length; i++) op_Pers[i].style.display="none";
}else if(value=='1501'){
for (var i = 1; i < 4; i++) op_Pers[i].style.display="none";
for (var i = 4; i < 7; i++) op_Pers[i].style.display="block";
for (var i = 7; i < op_Pers.length; i++) op_Pers[i].style.display="none";
}else if(value=='2002'){
for (var i = 1; i < 7; i++) op_Pers[i].style.display="none";
for (var i = 7; i < op_Pers.length; i++) op_Pers[i].style.display="block";
}
}
</script>
</head>
<body >
<div class="image-container set-full-height" style="background-image: url('http://4.bp.blogspot.com/-P64BfRcnZK8/UXCHQvUE6lI/AAAAAAAAAis/_rQYb8Xn4AY/s1600/claves-para-una-decoracion-vintage.jpg')">
<!-- Big container -->
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<!-- Wizard container -->
<div class="wizard-container">
<div class="card wizard-card ct-wizard-orange" id="wizardProfile">
<form action="" method="post" id="estimate">
<!-- You can switch "ct-wizard-orange" with one of the next bright colors: "ct-wizard-blue", "ct-wizard-green", "ct-wizard-orange", "ct-wizard-red" -->
<div class="wizard-header">
<h3>
<b>COTIZADOR</b> CALIFORNIA INTERIORS <br>
<small>El fino complemento para decorar</small>
</h3>
</div>
<ul>
<li><a href="#about" data-toggle="tab">Información del Cliente</a></li>
<li><a href="#account" data-toggle="tab">Información del Producto</a></li>
<li><a href="#address" data-toggle="tab">Características del Producto</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="about">
<div class="row">
<h4 class="info-text">Información del Cliente </h4>
<div class="col-sm-6 col-sm-offset-3">
<div class="form-group">
<label>Nombres</label>
<input name="firstname" type="text" class="form-control" placeholder="Antonio Gamez..." required>
</div>
</div>
<div class="col-sm-6 col-sm-offset-3">
<div class="form-group">
<label>Email</label>
<input name="email" type="email" class="form-control" placeholder="[email protected]" required>
</div>
</div>
<div class="col-sm-6 col-sm-offset-3">
<div class="form-group">
<label>Celular</label>
<input name="phone" type="text" class="form-control" placeholder="6621....">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="account">
<h4 class="info-text"> Información del producto </h4>
<div class="row">
<div class="col-sm-4">
<img id="img_prod" src='http://www.vintagedecoracion.com.mx/images/neulux/persianas-neulux.jpg' class='img-responsive'>
</div>
<div class="col-sm-8">
<div class="form-group">
<label>Producto <small>(Requerido)</small></label>
<select class='form-control' required name='producto' onchange="sel_prod(this.value)">
<option value=''>-- Selecciona --</option>
<option value='Alfombra' data-toggle="modal" data-target="#msg-pedido">Alfombra</option>
<option value='Pasto'>Pasto Sintético</option>
<option value='Piso'>Piso Laminado-TERZA</option>
<option value='Persianas'>Persianas</option>
</select>
</div>
<div class="col-sm-15">
<div class="form-group">
<label>Área</label>
<input type="text" name="ancho" class="form-control" placeholder="Sala, Estancia, Escalera, Patio, etc." required>
</div>
</div>
|