0

Tengo un varios input tipo checkbox

<input id="objeto" class="areasC" type="checkbox" value="1">

<input id="tamaño" class="areasC" type="checkbox" value="1">

<input id="color" class="areasC" type="checkbox" value="1">

Y tengo un javascript donde tengo lo siguiente

let areaCult = [];

$("input:checkbox[class=areasC]:checked").each(function() {
      areaCult.push(this.value);
});

Lo que hace es checar que el input tenga esa clase y esten marcados, si es así, lo va colocando en un arreglo llamado areaCult, si no estan marcados no lo incluye en el arreglo.

Mi duda es, ¿Cómo le haría para si en ves de tener 3 checkbox tengo 3 select?

1
  • Hola, me gustaría poder ayudarte pero no me queda claro del todo. Quieres tener 3 select? o quieres tener 1 select y dentro de ese select tener múltiples elementos seleccionados? Commented el 2 abr. 2019 a las 16:42

1 respuesta 1

1

La idea es poder aprovechar los métodos que nos ofrece jQuery.

Para eso, recorremos todos los select que tenemos con each. Una vez hecho esto, filtramos los elementos option que han sido seleccionados con has, ahí vamos obteniendo los values de cada option y hacemos el push al array.

Para poder filtrar los elementos option que han sido seleccionados, debe de ser con el atributo de HTML selected

$(function() {
  let valuesSelectedOneClass = [];
  let valuesSelectedTwoClass = [];
  let valueOption = "";
  
  $("select").each(function(index){
      valueOption = $(this).val();
      if ($(this).has('option:selected') && $(this).hasClass('oneClass')){
          valuesSelectedOneClass.push(valueOption);
      }
      if ($(this).has('option:selected') && $(this).hasClass('twoClass')){
          valuesSelectedTwoClass.push(valueOption);
      }
  });
  
  alert('Valores seleccionados de oneClass: ' + valuesSelectedOneClass);
  alert('Valores seleccionados de twoClass: ' + valuesSelectedTwoClass);
});
<select id="firstSelect" class="oneClass">
  <option value="First item - first select" selected>First item - first select</option>
  <option value="Second item - first select" >Second item - first select</option>
  <option value="Third item - first select" >Third item - first select</option>
</select>

<select id="secondSelect" class="twoClass">
  <option value="First item - second select" >First item - second select</option>
  <option value="Second item - second select" selected>Second item - second select</option>
  <option value="Third item - second select" >Third item - second select</option>
</select>

<select id="thirdSelect" class="oneClass">
  <option value="First item - third select" >First item - third select</option>
  <option value="Second item - third select" >Second item - third select</option>
  <option value="Third item - third select" selected>Third item - third select</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

6
  • y si quiero usar la clase? o sea quiero poner 6 select 3 tienen que hacer push en un array y otros 3 en otro array solo los que se seleccionaron de diferente nombre entonces si tendría que colocar que verifique la clase se llame tal y eso?
    – JV93
    Commented el 2 abr. 2019 a las 17:30
  • @JV93 Te actualice el código con lo que necesitas :)
    – Hoose
    Commented el 2 abr. 2019 a las 17:52
  • 1
    me resolvió el problema muchas gracias!
    – JV93
    Commented el 3 abr. 2019 a las 15:34
  • oye una duda mas y si le quiero incluir un dos input y que esos mismos uno tenga la clase twoClass y el otro la oneClass y se guarden con sus respectivo arreglos como seria le añadiria un && mas?
    – JV93
    Commented el 4 abr. 2019 a las 4:27
  • No entendí lo que quieres decir. @JV93
    – Hoose
    Commented el 4 abr. 2019 a las 6:19

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.