Tengo un cuadro de entrada de selección que me permite seleccionar varios valores. En este caso tengo 4 categorías y cuando hago clic en una categoría aparecen las subcategorías. Como puede ver, está funcionando bien. El único problema es que cuando selecciono más de una categoría, muestra solo las subcategorías de la primera categoría seleccionada. ¿Cómo puedo mostrar cada categoría junto con las subcategorías cuando se seleccionan varias categorías? Por ejemplo, si selecciono en la categoría 1, categoría 2 y categoría 3, quiero que se muestre lo siguiente:

Categoría 1: Subcategoría 1.1, Subcategoría 1.2

Categoría 2: Subcategoría 2.1, Subcategoría 2.2

Categoría 3: Subcategoría 3.1, Subcategoría 3.2

    $('select').on('change', function () {
        var subcategories = '';
        var str = "This category contains these subcategories: ";
        var result = str.bold();

        switch (this.value) {
               case 'Category 1':
                subcategories = "Subcategory 1.1, Subcategory 1.2";
                break;
                
                case 'Category 2':
                subcategories = "Subcategory 2.1, Subcategory 2.2";
                break;
                
                case 'Category 3':
                subcategories = "Subcategory 3.1, Subcategory 3.2";
                break;
                
                case 'Category 4':
                subcategories = "Subcategory 4.1, Subcategory 4.2";
                break;
 
        }
        document.getElementById("showSubcategory").innerHTML = result + subcategories;
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="Category 1">Category 1</option>
  <option value="Category 2">Category 2</option>
  <option value="Category 3">Category 3</option>
  <option value="Category 4">Category 4</option>
</select>

<div id="showSubcategory"></div>
1
Dev 28 oct. 2019 a las 11:07

4 respuestas

La mejor respuesta

Esta función le dará los resultados deseados. Utiliza Array.reduce en las opciones de selección para crear una cadena que representa el nombre de categoría y las subcategorías para cada opción seleccionada:

$('select').on('change', function() {
  var subcategories = Object.values(this.options).reduce((c, v) => {
    if (v.selected) {
      switch (v.value) {
        case 'Category 1':
          subcategories = "Subcategory 1.1, Subcategory 1.2";
          break;
        case 'Category 2':
          subcategories = "Subcategory 2.1, Subcategory 2.2";
          break;
        case 'Category 3':
          subcategories = "Subcategory 3.1, Subcategory 3.2";
          break;
        case 'Category 4':
          subcategories = "Subcategory 4.1, Subcategory 4.2";
          break;
      }
      return c + v.value + ': ' + subcategories + '<br>';
    }
    return c;
  }, '');
  document.getElementById("showSubcategory").innerHTML = subcategories;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="Category 1">Category 1</option>
  <option value="Category 2">Category 2</option>
  <option value="Category 3">Category 3</option>
  <option value="Category 4">Category 4</option>
</select>

<div id="showSubcategory"></div>
1
Nick 28 oct. 2019 a las 08:25

Usted puede hacer:

var subcategories = {
  'Category 1': 'Subcategory 1.1, Subcategory 1.2',
  'Category 2': 'Subcategory 2.1, Subcategory 2.2',
  'Category 3': 'Subcategory 3.1, Subcategory 3.2',
  'Category 4': 'Subcategory 4.1, Subcategory 4.2'
}

$('select').on('change', function() {
  $('#showSubcategoryUl').html('')
  $.each($(this).val(), function(i, v) {
    $('#showSubcategoryUl').append($('<li>').text(subcategories[v]))
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="Category 1">Category 1</option>
  <option value="Category 2">Category 2</option>
  <option value="Category 3">Category 3</option>
  <option value="Category 4">Category 4</option>
</select>

<ul id="showSubcategoryUl"></ul>
0
Yosvel Quintero 28 oct. 2019 a las 08:52
$('select').on('change', function() {
  var collection = $(this)[0].selectedOptions;
  //console.log(collection);
  var subcategories = '';
  var str = "This category contains these subcategories: ";
  var result = str.bold();

  for (var i = 0; i < collection.length; i++) {
    //console.log(collection[i].label)
    switch (collection[i].label) {
      case 'Category 1':
        subcategories = "Subcategory 1.1, Subcategory 1.2";
        break;
      case 'Category 2':
        subcategories = "Subcategory 2.1, Subcategory 2.2";
        break;
      case 'Category 3':
        subcategories = "Subcategory 3.1, Subcategory 3.2";
        break;
      case 'Category 4':
        subcategories = "Subcategory 4.1, Subcategory 4.2";
        break;
    }

    result += subcategories;
  }

  document.getElementById("showSubcategory").innerHTML = result;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="Category 1">Category 1</option>
  <option value="Category 2">Category 2</option>
  <option value="Category 3">Category 3</option>
  <option value="Category 4">Category 4</option>
</select>

<div id="showSubcategory"></div>

En su caso, puede usar selectedOptions para leer la lista de seleccionados.

0
sugars 28 oct. 2019 a las 08:27

En lugar de usar switch, intente asignar los valores a un objeto y luego agregue iterando la matriz de valores.

$('select').on('change', function() {
  var subcategories = '';
  let val = {
    cat_1: "Subcategory 1.1, Subcategory 1.2",
    cat_2: "Subcategory 2.1, Subcategory 2.2",
    cat_3: "Subcategory 3.1, Subcategory 3.2",
    cat_4: "Subcategory 4.1, Subcategory 4.2"
  };
  $(this).val().forEach((v, i) => {
    subcategories += `<div> Category ${i+1}-  ${val[v]}</div>`;
  })
  document.getElementById("showSubcategory").innerHTML = `
  <b>This category contains these subcategories: </b> ${subcategories}
  `;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="cat_1">Category 1</option>
  <option value="cat_2">Category 2</option>
  <option value="cat_3">Category 3</option>
  <option value="cat_4">Category 4</option>
</select>

<div id="showSubcategory"></div>
1
Nidhin Joseph 28 oct. 2019 a las 08:29