1

Hola espero me puedan ayudar. Necesito que al seleccionar en el menu select "numero 1" ó "numero 2".

<select>
  <option>numero 1</option>
  <option>numero 2</option>
</select>

Que pase a las cartas y así agregar múltiples cartas con contenido del "option" diferentes "numero 1" ó "numero 2"

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 += '<div id="ejemplo"></div>';
      template += '<h3 class="card-title">' + card[i].name + '</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;
      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);
      }
    }
    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);
var opciones = document.getElementById('opciones');

document.getElementById('boton')
  .addEventListener('click', (e) => {
    $("#ejemplo").html(opciones.value);
  });
.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>número 1</option>
        <option>número 2</option>
        <option>número 3</option>
        <option>número 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>

4
  • 1- ¿Que debe suceder si escribo 'Hola' en el input, tengo seleccionado número 2 y presiono el botón agregar carta? 2-¿Donde se vera reflejado el resultado deseado? Commented el 3 dic. 2018 a las 3:25
  • Mira al escribir Hola y agregar carta este hola se vera en la carta y puedes agregar otra carta con otro texto diferente y no eliminara la carta anterior. Lo que necesito agregar es por ejemplo: cuando le de en numero 2 del menú select ese mismo texto "numero 2" se coloque en la tarjeta y no se elimine o cambie cundo yo cree otra tarjeta con otro select por ejemplo "numero 4" y la anterior siga en numero 2.
    – OrielC.
    Commented el 3 dic. 2018 a las 18:21
  • @OrielC. no le agregues solucionado a tu pregunta, así no funciona este lugar, ya aceptaste la respuesta que te dió solución y con eso basta
    – user75901
    Commented el 3 dic. 2018 a las 23:28
  • @shadow ok Disculpa soy nuevo y estaba desesperado por esta solución ya que no podía avanzar en mi proyecto. Un Saludo
    – OrielC.
    Commented el 3 dic. 2018 a las 23:38

1 respuesta 1

1

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
    });
}
3
  • 1
    hola MVPFrans, gracias por responder pero para que la respuesta sea de calidad no basta con pegar el codigo, has tambien de explicar su funcionamiento. un saludo !
    – lois6b
    Commented el 3 dic. 2018 a las 8:13
  • Hola Creo que no funciona así, ya que al seleccionar numero 4 salen los 4 pero al seleccionar nuevamente 1, se eliminan los 4 anteriores y tengo ya escrito un código donde quiero ir agregando información de los input y lo único que me falta es la del select que no logro configurar el script
    – OrielC.
    Commented el 3 dic. 2018 a las 18:26
  • Esto es exactamente lo que necesitaba. Gracias!
    – OrielC.
    Commented el 3 dic. 2018 a las 22:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.