如何在一行中获取每个变量答案

【问题标题】：how to get each variable in one line如何在一行中获取每个变量
【发布时间】：2018-11-08 03:31:35
【问题描述】：

<div class="auswahl">
    <select id="1Riegel">
        <option value="Mix">Mix</option>
        <option value="Schoko">Schoko</option>
        <option value="Frucht">Frucht</option>
    </select>
    <select "id="1Shake">
        <option value="Mix">Mix</option>
        <option value="Schoko">Schoko</option>
        <option value="Vanille">Vanille</option>
    </select>
</div>

var check_attribute = $(this).parents('div.produkt').find('select');
$.each(check_attribute, function (index, value) {
    var name  = $(this).attr('id'),
    wert  = ' ' + $(value).find('option:selected').val();
    attribute = name.substring(1)+wert;
    console.log(attribute);
});

这将输出：

Riegel Frucht
摇晃 Schoko

在控制台中...但我需要它在一行中，如下所示：

Riegel Frucht - Shake Schoko

有人可以帮我解决这个问题吗？

【问题讨论】：

仅供参考，$(value).find('option:selected').val(); 可以简化为 $(value).val() 或 value.value

标签： jquery variables console line

【解决方案1】：

您可以改用.map 来获取所有<select> 和选定选项字符串的数组，然后通过- 连接这些字符串：

const output = $('select').map(function() {
  return $(this).attr('id').slice(1) + ' ' + $(this).find('option:selected').val();
})
  .get()
  .join(' - ');

console.log(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="auswahl">
  <select id="1Riegel">
    <option value="Mix">Mix</option>
    <option value="Schoko">Schoko</option>
    <option value="Frucht" selected>Frucht</option>
  </select>
  <select id="1Shake ">
    <option value="Mix ">Mix</option>
    <option value="Schoko " selected>Schoko</option>
    <option value="Vanille ">Vanille</option>
  </select>
</div>

或者，您可以完全避免使用 jQuery，不需要为这么简单的东西包含一个大库：

const output = Array.prototype.map.call(
  document.querySelectorAll('select'),
  select => select.id.slice(1) + ' ' + select.value
)
  .join(' - ');
  
  
console.log(output);

<div class="auswahl">
  <select id="1Riegel">
    <option value="Mix">Mix</option>
    <option value="Schoko">Schoko</option>
    <option value="Frucht" selected>Frucht</option>
  </select>
  <select id="1Shake ">
    <option value="Mix ">Mix</option>
    <option value="Schoko " selected>Schoko</option>
    <option value="Vanille ">Vanille</option>
  </select>
</div>

【讨论】：

非常感谢，它现在应该像现在一样工作 - 太棒了:) 为我节省了很多时间。谢谢

【解决方案2】：

var line = '';
var check_attribute = $(this).parents('div.produkt').find('select');
$.each(check_attribute, function (index, value) {
      var name = $(this).attr('id'),
      wert = ' ' + $(value).find('option:selected').val();
      attribute = name.substring(1) + wert;
      if(line.lenght>0){
       line += " - ";
      }
      line +=  attribute;
 });
console.log(line);

这台服务器的用途

【讨论】：

这将在输出的开头添加一个额外的-。