Hola espero me puedan ayudar.
Necesito que al seleccionar en el menu select
"numero 1" ó "numero 2".
Que pase a las cartas y así agregar múltiples cartas con contenido del "option" diferentes "numero 1" ó "numero 2"
YA ESTA MODIFICADO CON LA SOLUCIÓN A MI PREGUNTA
var card = [
];
(function newcards(card) {
this.init = function() {
this.generateList();
this.enterUser();
};
this.generateList = function() {
var parent = document.querySelector(".contenido");
var template = '';
for (var i = 0; i < card.length; i++) {
template += '<div class="col-sm-4">';
template += '<div class="card animated bounceInRight">';
template += '<div class="card-delete" data-card="' + i + '">x</div>';
template += '<div class="card-block">';
template += '<h3 class="card-title">' + card[i].name + '</h3>';
template += '<h3 class="card-title">' + card[i].select + '</h3>';
template += '</div>';
template += '</div>';
template += '</div>';
}
parent.innerHTML = '';
parent.insertAdjacentHTML('afterbegin', template);
deleteCard();
};
this.enterUser = function() {
function grabUser() {
var name = document.querySelector('#user_name').value,
select = 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({
select: selectedText,
name: name
});
generateList();
} else {
document.querySelector('#error').style.display = 'block';
setTimeout(function() {
document.querySelector('#error').style.display = 'none';
}, 2000);
}
}
document.querySelector('#myForm').addEventListener('submit', function(e) {
e.preventDefault();
grabUser();
});
};
this.validateUser = function(inputs) {
for (var i = 0; i < inputs.length; i++) {
if (inputs[i] == '') {
return false
}
}
return true;
};
this.deleteCard = function() {
var buttons = document.querySelectorAll(".card-delete");
function deleteThis(element) {
var obj = parseInt(element.getAttribute('data-card'));
card.splice(obj, 1);
generateList();
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function(e) {
deleteThis(this);
})
};
};
this.init();
})(card);
.card {
width: 300px;
height: 300px;
transition: transform 0.5s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card-block {
margin: 1em;
}
.card-text {
color: #00BCD4;
margin-bottom: 0px;
}
#error {
display: none;
}
.card-delete {
position: absolute;
right: 10px;
top: 6px;
line-height: 9px;
padding: 5px 5px;
font-size: 17px;
color: #F44336;
cursor: pointer;
}
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="row">
<div class="form-container">
<form id="myForm">
<div class="form-group">
<input type="text" class="form-control" id="user_name" placeholder="Escribe lo que sea">
</div>
<select id="opciones">
<option>Numero 1</option>
<option>Numero 2</option>
<option>Numero 3</option>
<option>Numero 4</option>
</select>
<input type="submit" id="boton" class="btn btn-block btn-primary" value="Agregar Carta">
<p class="text-danger" id="error">Completa Los Campos</p>
</form>
</div>
<div class="content-container">
<div class="row contenido">
</div>
</div>
</div>