Javascript：从选择输入中获取多个值答案

【问题标题】：Javascript: Get multiple values from a select inputJavascript：从选择输入中获取多个值
【发布时间】：2020-02-23 12:19:42
【问题描述】：

我有一个选择输入框，允许我选择多个值。在这种情况下，我有 4 个类别，当我单击一个类别时，会出现子类别。如您所见，它工作得很好。唯一的问题是，当我选择多个类别时，它仅显示第一个选定类别的子类别。选择多个类别时，如何显示每个类别及其子类别？例如，如果我选择类别 1、类别 2 和类别 3，我希望显示以下内容：

类别 1：子类别 1.1、子类别 1.2

类别 2：子类别 2.1、子类别 2.2

类别 3：子类别 3.1、子类别 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>

【问题讨论】：

获取selectedOptions 并对其进行迭代。
正如@ChrisG 建议的那样，您可以使用Array.from(this.selectedOptions).map(function(x) { return x.value; }); 来获取值列表。你可以用 ES6 [...this.selectedOptions].map(x => x.value) 来缩短它。
How to get multiple select box values using jquery?的可能重复

标签： javascript jquery html

【解决方案1】：

不要使用switch，而是尝试将值分配给一个对象，然后通过迭代值数组来追加。

$('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>

【讨论】：

感谢@Nidhin Joseph 的回复。有没有办法分别显示每个选定的类别......就像我在问题中描述的那样？

【解决方案2】：

此功能将为您提供所需的结果。它在 select 的选项上使用 Array.reduce 来创建一个字符串，该字符串表示每个选定选项的类别名称和子类别：

$('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>

【讨论】：

@Dev 不用担心 - 很高兴我能帮上忙。我想你有很多很好的答案......

【解决方案3】：

$('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>

在您的情况下，您可以使用selectedOptions 来读取所选列表。

【讨论】：

【解决方案4】：

你可以这样做：

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>

【讨论】：