Skip to main content
se añadieron 585 caracteres en el cuerpo
Origen Enlace

te adjuntoagregué las siguientes líneas a la solución... espero te ayudefunction grabUser, saludosubicarlas antes de var elements = [name]

// Referencia al Select
let elOpt = document.getElementById('opciones');
// Obtenemos el texto de la opción seleccionada
selectedText = elOpt.options[elOpt.selectedIndex].text;
// Obteneros el valor de la opción seleccionada
selectedValue = elOpt.options[elOpt.selectedIndex].value;

Quedando de la siguiente manera:

function grabUser() {
    var name = document.querySelector('#user_name').value;

    // Referencia al Select
    let elOpt = document.getElementById('opciones');
    // Obtenemos el texto de la opción seleccionada
    selectedText = elOpt.options[elOpt.selectedIndex].text;
    // Obteneros el valor de la opción seleccionada
    selectedValue = elOpt.options[elOpt.selectedIndex].value;   

    var elements = [name];
    if (validateUser(elements)) {
        document.querySelector('#myForm').reset();

        card.push({
            name: name
        });
        
        generateList();
    } else {
        document.querySelector('#error').style.display = 'block';
        setTimeout(function() {
            document.querySelector('#error').style.display = 'none';
        }, 2000);
    }
} 

1.- Si lo que deseas es mostrar el texto de la opción seleccionada en el card, reemplaza

card.push({
    name: name
});
$(document).ready(function() {

  $('#combo').on({
    change: function() {
      if ($(this).val() > 0) {

        var cadena = ''
        for (var i = 0; i < $(this).val(); i++) {
          cadena += '<div class="card">Card' + (i + 1) + '</div>';
        }

        $('#resultado').html(cadena);
      } else {
        $('#resultado').html('');
      }
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>

  <style type="text/css">
    .card {
      background-color: #cccccc;
      width: 100px;
      height: 50px;
      margin: 10px;
    }
  </style>
</head>

<body>

  <select id="combo">
    <option value="0">Seleccionar</option>
    <option value="1">Número 1</option>
    <option value="2">Número 2</option>
    <option value="3">Número 3</option>
    <option value="4">Número 4</option>
  </select>

  <div id="resultado">

  </div>

</body>

</html>
Por

 
card.push({
    name: selectedText
});

2.- Si lo que deseas es itinerar en base al valor de la opción seleccionada, importante agregar el atributo value al select.

for(var i = 0; i < selectedValue; i++) {
    card.push({
        name: selectedText
    });
}

te adjunto la solución... espero te ayude, saludos.

$(document).ready(function() {

  $('#combo').on({
    change: function() {
      if ($(this).val() > 0) {

        var cadena = ''
        for (var i = 0; i < $(this).val(); i++) {
          cadena += '<div class="card">Card' + (i + 1) + '</div>';
        }

        $('#resultado').html(cadena);
      } else {
        $('#resultado').html('');
      }
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>

  <style type="text/css">
    .card {
      background-color: #cccccc;
      width: 100px;
      height: 50px;
      margin: 10px;
    }
  </style>
</head>

<body>

  <select id="combo">
    <option value="0">Seleccionar</option>
    <option value="1">Número 1</option>
    <option value="2">Número 2</option>
    <option value="3">Número 3</option>
    <option value="4">Número 4</option>
  </select>

  <div id="resultado">

  </div>

</body>

</html>

 

agregué las siguientes líneas a la function grabUser, ubicarlas antes de var elements = [name]

// Referencia al Select
let elOpt = document.getElementById('opciones');
// Obtenemos el texto de la opción seleccionada
selectedText = elOpt.options[elOpt.selectedIndex].text;
// Obteneros el valor de la opción seleccionada
selectedValue = elOpt.options[elOpt.selectedIndex].value;

Quedando de la siguiente manera:

function grabUser() {
    var name = document.querySelector('#user_name').value;

    // Referencia al Select
    let elOpt = document.getElementById('opciones');
    // Obtenemos el texto de la opción seleccionada
    selectedText = elOpt.options[elOpt.selectedIndex].text;
    // Obteneros el valor de la opción seleccionada
    selectedValue = elOpt.options[elOpt.selectedIndex].value;   

    var elements = [name];
    if (validateUser(elements)) {
        document.querySelector('#myForm').reset();

        card.push({
            name: name
        });
        
        generateList();
    } else {
        document.querySelector('#error').style.display = 'block';
        setTimeout(function() {
            document.querySelector('#error').style.display = 'none';
        }, 2000);
    }
} 

1.- Si lo que deseas es mostrar el texto de la opción seleccionada en el card, reemplaza

card.push({
    name: name
});
Por

card.push({
    name: selectedText
});

2.- Si lo que deseas es itinerar en base al valor de la opción seleccionada, importante agregar el atributo value al select.

for(var i = 0; i < selectedValue; i++) {
    card.push({
        name: selectedText
    });
}
se añadieron 1301 caracteres en el cuerpo
Origen Enlace
lois6b
  • 7.6k
  • 5
  • 33
  • 54

te adjunto la solución... espero te ayude, saludos.

https://jsfiddle.net/mvpfrans/2dqbsp1a/1/

$(document).ready(function() {

  $('#combo').on({
    change: function() {
      if ($(this).val() > 0) {

        var cadena = ''
        for (var i = 0; i < $(this).val(); i++) {
          cadena += '<div class="card">Card' + (i + 1) + '</div>';
        }

        $('#resultado').html(cadena);
      } else {
        $('#resultado').html('');
      }
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>

  <style type="text/css">
    .card {
      background-color: #cccccc;
      width: 100px;
      height: 50px;
      margin: 10px;
    }
  </style>
</head>

<body>

  <select id="combo">
    <option value="0">Seleccionar</option>
    <option value="1">Número 1</option>
    <option value="2">Número 2</option>
    <option value="3">Número 3</option>
    <option value="4">Número 4</option>
  </select>

  <div id="resultado">

  </div>

</body>

</html>

te adjunto la solución... espero te ayude, saludos.

https://jsfiddle.net/mvpfrans/2dqbsp1a/1/

te adjunto la solución... espero te ayude, saludos.

$(document).ready(function() {

  $('#combo').on({
    change: function() {
      if ($(this).val() > 0) {

        var cadena = ''
        for (var i = 0; i < $(this).val(); i++) {
          cadena += '<div class="card">Card' + (i + 1) + '</div>';
        }

        $('#resultado').html(cadena);
      } else {
        $('#resultado').html('');
      }
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>

  <style type="text/css">
    .card {
      background-color: #cccccc;
      width: 100px;
      height: 50px;
      margin: 10px;
    }
  </style>
</head>

<body>

  <select id="combo">
    <option value="0">Seleccionar</option>
    <option value="1">Número 1</option>
    <option value="2">Número 2</option>
    <option value="3">Número 3</option>
    <option value="4">Número 4</option>
  </select>

  <div id="resultado">

  </div>

</body>

</html>

Origen Enlace

te adjunto la solución... espero te ayude, saludos.

https://jsfiddle.net/mvpfrans/2dqbsp1a/1/