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>
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
});
}