Tengo un código que mostrará / ocultará los div respectivos si se selecciona un valor de una lista desplegable. Los valores de los div ocultos se agregarán a una base de datos.

<script>
document.getElementById('number').addEventListener('change', function ()
{
    var style = number.value == 1 ? 'block' : 'none';
    document.getElementById('1tower').style.display = style;
	var style = number.value == 2 ? 'block' : 'none';
    document.getElementById('2tower').style.display = style;
	var style = number.value == 3 ? 'block' : 'none';
	document.getElementById('3tower').style.display = style;
});
</script>
<select id="number" name="number_towers">
<option hidden value=""></option>
<option value="1">1 tower</option>
<option value="2">2 towers</option>
<option value="3">3 towers</option>
</select>

<div id="1tower" style="display: none;">
A Tower Value 1: <input type ="text" name = "curent_nominal_sec1"/><br>
B Tower Value 1: <input type ="text" name = "putere_sec1"/><br>
C Tower Value 1: <input type ="text" name = "clasa_precizie_sec1"/></div>

<div id="2tower" style="display: none;">
A Tower Value 2: <input type ="text" name = "curent_nominal_sec2"/><br>
B Tower Value 2: <input type ="text" name = "putere_sec2"/><br>
C Tower Value 2: <input type ="text" name = "clasa_precizie_sec2"/></div>

<div id="3tower" style="display: none;">
A Tower Value 3: <input type ="text" name = "curent_nominal_sec3"/><br>
B Tower Value 3: <input type ="text" name = "putere_sec3"/><br>
C Tower Value 3: <input type ="text" name = "clasa_precizie_sec3"/></div>

¿Hay alguna forma de mostrar div's combinados? Ejemplo: si selecciono 2 torres, visualizo div 1 y 2. Si selecciono 3 torres, visualizo div 1,2 y 3.

Cualquier ayuda será apreciada

1
Calin Popescu 13 may. 2016 a las 15:53

3 respuestas

La mejor respuesta

Puede agregar una clase a cada torre y buscarlas en javascript. Luego obtienes el número seleccionado del menú desplegable. Lo necesitaremos a continuación para la cantidad de bucles. Recorre todas las torres y comprueba si i sigue siendo inferior al number seleccionado. En caso afirmativo, cambia a block, de lo contrario a none. Puede agregar tantas torres como desee con este código:

var towers = document.getElementsByClassName('tower');
document.getElementById('number').addEventListener('change', function() {
  var number = this.value;
  for (var i = 0; i < towers.length; i++) {
    towers[i].style.display = i < number ? 'block' : 'none';
  }
});
<select id="number" name="number_towers">
  <option hidden value=""></option>
  <option value="1">1 tower</option>
  <option value="2">2 towers</option>
  <option value="3">3 towers</option>
</select>

<div id="1tower" class="tower" style="display: none;">
  A Tower Value 1:
  <input type="text" name="curent_nominal_sec1" />
  <br>B Tower Value 1:
  <input type="text" name="putere_sec1" />
  <br>C Tower Value 1:
  <input type="text" name="clasa_precizie_sec1" />
</div>

<div id="2tower" class="tower" style="display: none;">
  A Tower Value 2:
  <input type="text" name="curent_nominal_sec2" />
  <br>B Tower Value 2:
  <input type="text" name="putere_sec2" />
  <br>C Tower Value 2:
  <input type="text" name="clasa_precizie_sec2" />
</div>

<div id="3tower" class="tower" style="display: none;">
  A Tower Value 3:
  <input type="text" name="curent_nominal_sec3" />
  <br>B Tower Value 3:
  <input type="text" name="putere_sec3" />
  <br>C Tower Value 3:
  <input type="text" name="clasa_precizie_sec3" />
</div>

Si desea agregar más torres, lo único que debe hacer es editar el menú desplegable HTML con una opción adicional y un div con el formulario para una torre adicional.

0
Patrick2607 13 may. 2016 a las 13:05

Cambiar la condición de == a >=

<script>
document.getElementById('number').addEventListener('change', function ()
{
    var style = number.value >= 1 ? 'block' : 'none';
    document.getElementById('1tower').style.display = style;
    var style = number.value >= 2 ? 'block' : 'none';
    document.getElementById('2tower').style.display = style;
    var style = number.value >= 3 ? 'block' : 'none';
    document.getElementById('3tower').style.display = style;
});
</script>
0
ssnake 13 may. 2016 a las 13:04
<script>
 document.getElementById('number').addEventListener('change', function ()
{
var value = number.value;
document.getElementById('1tower').style.display = 'none';
document.getElementById('2tower').style.display = 'none';
document.getElementById('3tower').style.display = 'none';

for (var i = value; i > 0; i--) { 
    document.getElementById(i+'tower').style.display = 'block';
 }
});
</script>
0
Pradeep Charan 13 may. 2016 a las 13:08