PHP - Cambiar la imagen de pendiendo la seleccionada

 
Vista:
Imágen de perfil de Antonio
Val: 66
Ha disminuido 1 puesto en PHP (en relación al último mes)
Gráfica de PHP

Cambiar la imagen de pendiendo la seleccionada

Publicado por Antonio (39 intervenciones) el 05/08/2017 22:30:06
Hola, buenas tardes. Tengo este sistema de cotización que encontré en internet:
http://cotizadorweb.com.mx/

Pero me gustaría saber cómo hago para abajo de la imagen del producto aparezcan varios colores (en imagen) y cuando se seleccione uno, la imagen de arriba cambie con el color seleccionado:
WHnKVeo


Algo así que si pone alfombra y selecciona el color rojo, cambie la imagen con una alfombra roja, y así para el resto.

Supongo que es como esto:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function sel_estilo(value) //lo que pasa cuando se selecciona un estilo
  {
    $('#rango').val('').change();
    var select=document.getElementById("rango");
    var op=select.getElementsByTagName("option");
 
    if(value==''){
      for (var i = 1; i < op.length; i++) op[i].style.display="none";
    }else if(value=='Trafico'){
      for (var i = 1; i < 3; i++) op[i].style.display="block";
      for (var i = 3; i < op.length; i++) op[i].style.display="none";
    }else if(value=='Residencial'){
      $("#msg-pedido").modal({
        modal: true,
        buttons: {
            Ok: function() {
                $( this ).modal( "close" );
            }
        }
      });
      for (var i = 1; i < 3; i++) op[i].style.display="none";
      for (var i = 3; i < 10; i++) op[i].style.display="block";
      for (var i = 10; i < op.length; i++) op[i].style.display="none";
    
    }else if(value=='7mm'){
      for (var i = 1; i < 12; i++) op[i].style.display="none";
      for (var i = 12; i < 14; i++) op[i].style.display="block";
      for (var i = 14; i < op.length; i++) op[i].style.display="none";
    }else if(value=='8mm'){
      for (var i = 1; i < 14; i++) op[i].style.display="none";
      for (var i = 14; i < 16; i++) op[i].style.display="block";
      for (var i = 16; i < op.length; i++) op[i].style.display="none";
    }else if(value=='10mm'){
      for (var i = 1; i < 16; i++) op[i].style.display="none";
      for (var i = 16; i < 18; i++) op[i].style.display="block";
      for (var i = 18; i < op.length; i++) op[i].style.display="none";
 
    }else if(value=='12mm'){
      for (var i = 1; i < op.length; i++) op[i].style.display="none"; //??????
 
    }else if(value=='Rollet'){
 
    }else if(value=='Wollet'){
 
    }else if(value=='Panellet'){
 
    }else if(value=='Aluminix'){
 
    }
  }

Pero no se como hacer para aplicarlo ahora con colores y hacer que vaya cambiando la imagen...

Un saludo !!.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.037
Oro
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Cambiar la imagen de pendiendo la seleccionada

Publicado por xve (6929 intervenciones) el 06/08/2017 08:05:15
Hola antonio, con el código que pones, no se muy bien como funciona, ni a que hace referencia cada cosa... pero para cambiar una imagen, puede ser tan sencillo como esto:
1
$('#idImagen').src="nuevaImagen.jpg";

Siento no poder serte de mas ayuda...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Antonio
Val: 66
Ha disminuido 1 puesto en PHP (en relación al último mes)
Gráfica de PHP

Cambiar la imagen de pendiendo la seleccionada

Publicado por Antonio (39 intervenciones) el 06/08/2017 09:05:35
Hola, gracias por responder. Sí, bueno, lo que pasa es que son varios los productos, por ejemplo si está en "Alfombra" debe haber las imágenes de los colores y poder cambiar, pero si está "Persianas" también debe estar las imágenes de los colores y otras imágenes de las persianas con esos colores, este es el código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>CALIFORNIA INTERIORS --  Cotizador</title>
 
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  <meta name="viewport" content="width=device-width" />
 
 
  <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
 
  <link href="assets/css/bootstrap-theme.min.css" rel="stylesheet" />
  <link href="assets/js/bootstrap.min.js" rel="stylesheet" />
 
	<link href="assets/css/gsdk-base.css" rel="stylesheet" />
 
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet">
 
  <script>
 
  function sel_prod(value) //Lo que pasa cuando se selecciona un producto
  {
    $('#estilo').val('').change();
    $('#estiloP').val('').change();
 
    var select=document.getElementById("estilo");
    var op=select.getElementsByTagName("option");
 
    var select_r=document.getElementById("rango");
    var op_r=select_r.getElementsByTagName("option");
 
 
    if(value==''){
      for (var i = 1; i < op.length; i++) op[i].style.display="none";
    }else if(value=='Alfombra'){
      $('#img_prod').attr("src",'img/alfombra.jpg'); //**************imagen para alfombra****************
      //mostrar ventana que diga que todos las alfombras son bajo pedido
      //alert("Todas las alfombras son bajo pedido.");

   //   $("#msg-pedido").css('display','block');
      

      //mostramos y ocultamos estilos
      for (var i = 0; i < 3; i++) op[i].style.display="block";
      for (var i = 3; i < op.length; i++) op[i].style.display="none";

      $('#div_estilos').css('display','block');
      $('#div_est_pasto').css('display','none');
      $('#div_calidad').css('display','block');
      $('#div_color_pers').css('display','none');

      $('#mExterior').css('display', 'none');
      $('#mInterior').css('display', 'none');

    }else if(value=='Pasto'){
      $('#img_prod').attr("src",'img/pasto.jpg'); //**************imagen para pasto ****************
      $('#div_estilos').css('display','none');
      $('#div_est_pasto').css('display','block');
      $('#div_calidad').css('display','none');
      $('#div_color_pers').css('display','none');

      $('#mExterior').css('display', 'none');
      $('#mInterior').css('display', 'none');
      $('#color').css('display', 'none');

      for (var i = 1; i < 10; i++) op_r[i].style.display="none";
      for (var i = 10; i < 12; i++) op_r[i].style.display="block";
      for (var i = 12; i < op_r.length; i++) op_r[i].style.display="none";

    }else if(value=='Piso'){
      $('#img_prod').attr("src",'img/piso.jpg'); //**************imagen para piso ****************
      for (var i = 1; i < 3; i++) op[i].style.display="none";
      for (var i = 3; i < 7; i++) op[i].style.display="block";
      for (var i = 7; i < op.length; i++) op[i].style.display="none";

      $('#div_estilos').css('display','block');
      $('#div_est_pasto').css('display','none');
      $('#div_calidad').css('display','block');
      $('#div_color_pers').css('display','none');

      $('#mExterior').css('display', 'none');
      $('#mInterior').css('display', 'none');
      
    }else if(value=='Persianas'){
      /*for (var i = 1; i < 7; i++) op[i].style.display="none"; <!--Estilo de las persianas-->
      for (var i = 7; i < op.length; i++) op[i].style.display="block";*/
 
      $('#img_prod').attr("src",'img/persianas.jpg'); //**************imagen para persianas ****************
      for (var i = 1; i < 18; i++) op_r[i].style.display="none";
      for (var i = 18; i < 21; i++) op_r[i].style.display="block";
      for (var i = 21; i < op_r.length; i++) op_r[i].style.display="none";

      $('#div_estilos').css('display','none');
      $('#div_est_pasto').css('display','none');
      $('#div_calidad').css('display','none');
      $('#div_color_pers').css('display', 'block');

      $('#mExterior').css('display', 'block');
      $('#mInterior').css('display', 'block');
    }
  }

  function sel_estilo(value) //lo que pasa cuando se selecciona un estilo
  {
    $('#rango').val('').change();
    var select=document.getElementById("rango");
    var op=select.getElementsByTagName("option");

    if(value==''){
      for (var i = 1; i < op.length; i++) op[i].style.display="none";
    }else if(value=='Trafico'){
      for (var i = 1; i < 3; i++) op[i].style.display="block";
      for (var i = 3; i < op.length; i++) op[i].style.display="none";
    }else if(value=='Residencial'){
      $("#msg-pedido").modal({
        modal: true,
        buttons: {
            Ok: function() {
                $( this ).modal( "close" );
            }
        }
      });
      for (var i = 1; i < 3; i++) op[i].style.display="none";
      for (var i = 3; i < 10; i++) op[i].style.display="block";
      for (var i = 10; i < op.length; i++) op[i].style.display="none";
    
    }else if(value=='7mm'){
      for (var i = 1; i < 12; i++) op[i].style.display="none";
      for (var i = 12; i < 14; i++) op[i].style.display="block";
      for (var i = 14; i < op.length; i++) op[i].style.display="none";
    }else if(value=='8mm'){
      for (var i = 1; i < 14; i++) op[i].style.display="none";
      for (var i = 14; i < 16; i++) op[i].style.display="block";
      for (var i = 16; i < op.length; i++) op[i].style.display="none";
    }else if(value=='10mm'){
      for (var i = 1; i < 16; i++) op[i].style.display="none";
      for (var i = 16; i < 18; i++) op[i].style.display="block";
      for (var i = 18; i < op.length; i++) op[i].style.display="none";

    }else if(value=='12mm'){
      for (var i = 1; i < op.length; i++) op[i].style.display="none"; //??????

    }else if(value=='Rollet'){

    }else if(value=='Wollet'){

    }else if(value=='Panellet'){

    }else if(value=='Aluminix'){

    }
  }
 
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Antonio
Val: 66
Ha disminuido 1 puesto en PHP (en relación al último mes)
Gráfica de PHP

Cambiar la imagen de pendiendo la seleccionada

Publicado por Antonio (39 intervenciones) el 06/08/2017 09:06:33
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
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="ramon@gmail.com" 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>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Antonio
Val: 66
Ha disminuido 1 puesto en PHP (en relación al último mes)
Gráfica de PHP

Cambiar la imagen de pendiendo la seleccionada

Publicado por Antonio (39 intervenciones) el 06/08/2017 09:06:56
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<div class="col-sm-4">
                      <div class="form-group">
                          <label>Ancho</label>
                          <input type="text" name="ancho" class="form-control" placeholder="1.205" required>
                      </div>
                  </div>
 
 
                  <div class="col-sm-4">
                      <div class="form-group">
                          <label>Largo</label>
                          <input type="text" name="ancho" class="form-control" placeholder="1.205" required>
                      </div>
                   </div>
 
                  <div class="col-sm-4">
                      <div class="form-group">
                         <label>ó</label> <label>Metros Cuadrados</label>
                           <input type="text" name="ancho" class="form-control" placeholder="1.205" required>
                      </div>
                  </div>
 
 
									  <div id="div_estilos" class="form-group">
                                        <label>Estilo </label>
                                        <select class='form-control' id="estilo" required name='estilo' onchange="sel_estilo(this.value)">
											<option value=''>-- Selecciona --</option>
                       <!--     Alfombra       -->
											<option value='Trafico' style="display:none">Tráfico Pesado</option> <!--1-->
											<option value='Residencial' style="display:none">Residencial</option>
                       <!--      Pasto Sintético         
                      <option value='R21' style="display:none">R21 G32(Bajo pedido)</option> 
                      <option value='Bermuda' style="display:none">Bermuda</option>-->
                       <!--      Piso Laminado       -->
                      <option value='7mm' style="display:none">7mm</option> <!--3-->
                      <option value='8mm' style="display:none">8mm</option>
                      <option value='10mm' style="display:none">10mm</option>
											<option value='12mm' style="display:none">12mm</option>
                      <!--      Persianas      -->
                      <option value='Rollet' style="display:none">Rollet</option> <!--7-->
                      <option value='Wollet' style="display:none">Wollet</option>
                      <option value='Panellet' style="display:none">Panellet</option>
                      <option value='Aluminix' style="display:none">Aluminix</option>
										</select>
                   </div>
 
                <div  class="form-group">
                    <label>Rango de precios</label>
                    <select class='form-control' required id="rango" name='rango' onchange="sel_rango(this.value)">
                      <option value=''>-- Selecciona --</option>
                      <!--      Calidad Alfombra (Trafico Pesado)       -->
                      <option value='250' style="display:none">$250 - $350</option> <!--1-->
                      <option value='351' style="display:none">$351 - $450</option>
                      <!--      Calidad Alfombra (Residencial)       -->
                      <option value='300' style="display:none">$300 - $450</option> <!--3-->
                      <option value='451' style="display:none">$451 - $600</option>
                      <option value='601_1' style="display:none">$601 - $750</option>
                      <option value='751' style="display:none">$751 - $950</option>
                      <option value='951' style="display:none">$951 - $1100</option>
                      <option value='1101' style="display:none">$1101 - $1250</option>
                      <option value='1250' style="display:none">$1250 - $1400</option>
                      <!--    Pasto Sintético      -->
                      <option value='450' style="display:none">$450 - $600</option>
                      <option value='450_2' style="display:none">$450 - $600</option> <!--10-->
                      <option value='601_2' style="display:none">$601 - $750</option>
                      <!--      Piso Laminado       -->
                      <option value='350' style="display:none">$350 - $400</option> <!--12-->
                      <option value='401' style="display:none">$401 - $450</option>
                      <option value='500' style="display:none">$500 - $550</option>
                      <option value='551' style="display:none">$551 - $600</option>
                      <option value='600' style="display:none">$600 - $650</option>
                      <option value='700' style="display:none">$700 - $750</option>
                        <!--    Persianas      -->
                      <option value='1000' style="display:none">$1000 - $1500</option> <!--18-->
                      <option value='1501' style="display:none">$1501 - $2001</option>
                      <option value='2002' style="display:none">$2002 - $2502</option>
                      <option value='2503' style="display:none">$2503 - $3003</option>
                    </select>
                </div>
 
                <div id="div_est_pasto" style="display:none" class="form-group">
                    <label>Estilo </label>
                    <select class='form-control' required id="estiloP"  name='estiloP' ">
                      <option value=''>-- Selecciona --</option>
                       <!--      Pasto Sintético       -->   
                      <option value='R21' style="display:none">R21 (Bajo pedido)</option>
                      <option value='G32' style="display:none">G32 (Bajo pedido)</option>
                     <!--3-->
                      <option value='Bermuda' style="display:none">Bermuda</option>
                    </select>
                </div>

                <div id="div_calidad" class="form-group">
                    <label>Calidad</label>
                     <select class='form-control' id ="calidad" required name='calidad'>
                      <option value=''>-- Selecciona --</option>
                             <!--      Calidad Alfombra (Tráfico Pesado)       --> 
                      <option value='Sprint' style="display:none">Guerrero-Sprint</option> <!--1-->
                      <option value='Gladiador' style="display:none">Gladiador</option>
                      <option value='Gladiador' style="display:none">Curator</option>
                      <option value='Curator' style="display:none">Olefina(Bajo Pedido)</option>
                             <!--      Calidad Alfombra (Residencial)       --> 
                      <option value='Sprint' style="display:none">Montreal</option> <!--5-->
                      <option value='Gladiador' style="display:none">Venus</option>
                      <option value='Curator' style="display:none">Castelo, Ejecutiva</option>
                      <option value='Olefina' style="display:none">Ejecutiva</option>
                      <option value='Olefina' style="display:none">Montecarlo</option>
                      <option value='Olefina' style="display:none">Castelo</option>
                      <option value='Olefina' style="display:none">Glam</option>
                                   <!--     Piso Laminado       --> 
                      <option value='Sprint' style="display:none">Casual</option> <!--12-->
                      <option value='Ambienta' style="display:none">Ambienta</option>
                      <option value='Gladiador' style="display:none">Trend</option>
                      <option value='Curator' style="display:none">Style</option>
                      <option value='Olefina' style="display:none">Splendor</option>
                      <option value='Sprint' style="display:none">Hickory</option>
                      <option value='Gladiador' style="display:none">Grand Walnut</option>
                      <option value='Curator' style="display:none">Mammut Plus</option>
                    </select>
                </div>
                <div id="div_color_pers" style="display: none" class="form-group">
                    <label>Color</label>
                     <select class='form-control' id ="colorPers" required name='colorPers'>
                      <option value=''>-- Selecciona --</option>
                             <!--      Color para Persianas       --> 
                      <option value='rojo' style="display:none">Rojo</option> <!--1-->
                      <option value='negro' style="display:none">Negro</option>
                      <option value='azul' style="display:none">Azul</option>
                      <option value='gris' style="display:none">Gris</option>
                      <option value='blanco' style="display:none">Blanco</option>
                      <option value='plateado' style="display:none">Plateado</option>
                      <option value='dorado' style="display:none">Dorado</option>
                      <option value='esmeralda' style="display:none">Esmeralda</option>
                    </select>
                </div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Antonio
Val: 66
Ha disminuido 1 puesto en PHP (en relación al último mes)
Gráfica de PHP

Cambiar la imagen de pendiendo la seleccionada

Publicado por Antonio (39 intervenciones) el 06/08/2017 09:07:51
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
</div>
 
 
                                </div>
                            </div>
                            <div class="tab-pane" id="address">
                                 <div class="row">
                                    <div class="col-sm-12">
                                        <h4 class="info-text"> Características del Producto </h4>
                                    </div>
                                    <div id="color" class="col-sm-6">
                                         <div class="form-group">
                                          <label>Color</label><br>
                                          <select name="exterior" class="form-control" >
                                              <option value="">-- Selecciona --</option>
                                              <option value="AF">Rojo</option>
                                              <option value="AX">Azul</option>
                                          </select>
                                        </div>
                                  </div>
 
                                  <div class="col-sm-3">
                                      <div class="form-group">
                                        <label>Cantidad</label>
                                        <input name="cantidad" type="cantidad" class="form-control" placeholder="3...">
                                      </div>
                                  </div>
                                  <div id="mExterior" class="col-sm-6" style="display:none">
                                      <div class="form-group">
                                        <label>Marco Exterior</label><br>
                                        <select name="exterior" class="form-control" >
                                          <option value="">-- Selecciona --</option>
                      										<option value="AF"></option>
                        									<option value="AX">No</option>
                                        </select>
                                      </div>
                                  </div>
                                  <div id="mInterior" class="col-sm-6" style="display:none">
                                         <div class="form-group">
                                            <label>Marco Interior</label><br>
                                             <select name="interior" class="form-control" >
                                                <option value="">-- Selecciona --</option>
                        												<option value="AF"></option>
                        												<option value="AX">No</option>
                                            </select>
                                          </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wizard-footer">
						<div id='result'></div>
						<hr>
                            <div class="pull-right">
                                <input type='button' class='btn btn-next btn-fill btn-warning btn-wd btn-sm' name='next' value='Siguiente' />
                                <input type='submit' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='finish' value='Finalizar' />
 
 
                            </div>
 
                            <div class="pull-left">
                                <input type='button' class='btn btn-previous btn-fill btn-default btn-wd btn-sm' name='previous' value='Anterior' />
                            </div>
 
                            <div class="clearfix"></div>
                        </div>
                    </form>
                </div>
            </div> <!-- wizard container -->
        </div>
        </div><!-- end row -->
 
        <!--Mensaje: Alfombras bajo pedido-->
        <div id="msg-pedido" class="modal fade">
          <div class="modal-dialog " >
            <div class="modal-content">
              <div class="modal-header">
                <button tyle="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Atenci&oacuten:</h4>
              </div>
              <div class="modal-body">
                <p>Todas las alfombras Residenciales son bajo pedido.</p>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
              </div>
            </div>
          </div>
        </div>
 
    </div> <!--  big container -->
 
 
    <div class="footer">
 
    </div>
 
</div>
 
</body>
 
    <script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script>
	<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
 
	<!--   plugins 	 -->
	<script src="assets/js/jquery.bootstrap.wizard.js" type="text/javascript"></script>
 
    <!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
	<script src="assets/js/jquery.validate.min.js"></script>
 
    <!--  methods for manipulating the wizard and the validation -->
	<script src="assets/js/wizard.js"></script>
	<script>
		var form1 = $( "#estimate" );
		form1.validate();
		$( "#estimate" ).submit(function( event ) {
			if (form1.valid()==true){
		  var parametros = $(this).serialize();
			  $.ajax({
				type: "POST",
				url: "process.php",
				data: parametros,
				 beforeSend: function(objeto){
					$("#result").html("Mensaje: Cargando...");
				  },
				success: function(datos){
				$("#result").html(datos);
 
			  }
			});
		  event.preventDefault();
			}
		});
	</script>
 
</html>

Como lo podría hacer cuando esté seleccionado "Alfombra", y cuando esté "Piso Laminado" y demás?, saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Antonio
Val: 66
Ha disminuido 1 puesto en PHP (en relación al último mes)
Gráfica de PHP

Cambiar la imagen de pendiendo la seleccionada

Publicado por Antonio (39 intervenciones) el 24/08/2017 19:12:38
Exactamente esto quiero: https://jsfiddle.net/3bL3y03g/2/

Quiero juntarlo a este: https://pastebin.com/q1CLJQfp que vendría siendo este: http://cotizadorweb.com.mx/ para cuando se elija un producto aparezca debajo de su imagen el color, pero no puedo juntarlos..
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Cambiar la imagen de pendiendo la seleccionada

Publicado por alberto (4 intervenciones) el 13/09/2017 20:02:14
Hola Antonio, lo lograste o todavia no?, sino despues te paso una idea que a mi me funciona algo parecido a lo que vos queres hacer
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar