如何获得一个未展平的多选值数组和单个输入？

Posted 2023-03-03

【中文标题】如何获得一个未展平的多选值数组和单个输入？

【英文标题】：How to get an unflattened array of multiselect values and single inputs together?

【发布时间】：2018-06-26 22:06:08

【问题描述】：

我在 Web 应用程序的页面上有一些动态创建的过滤器，其中过滤器“条目”有时是几个不同输入的组合，并且集合的值被收集到一个数组中以发送回服务器。如果这些都只是单个输入，那么一组值很容易映射到后端的输入，但是当一个或多个是具有多个选项的multiselect 时，一个扁平的值数组混合了multiselect' s 值和单个输入值不合适。

例如：如果我在搜索控制页面上为给定过滤器有两个输入，一个是 multiselect，另一个是 text 输入，我想收集两个元素的数组，第一个是选定值的数组，第二个是在文本输入中输入的值。因此，如果在第一个 multiselect 中我选择 "A", "B" 和 text 输入我输入 "Joe" 并且下面的代码收集输入值：

咖啡脚本：

filters = []
$(@customFilterElements.selector).each ->
  filterName = $(@).find('.filter_entry .filter_name:input').val()
  filterValues = $(@).find('.filter_entry .filter_value:input').map(->
   if $(@).data('multiselect')
     $(@).find('option:selected').map(->
       $(@).val()
     ).get()
   else
     $(@).val()
  ).get()
  filters.push(name: filterName, value: filterValues) 

javascript：（从上面转换）

var filters = [];

$(this.customFilterElements.selector).each(function() 
  var filterName, filterValues;
  filterName = $(this).find('.filter_entry .filter_name:input').val();
  filterValues = $(this).find('.filter_entry .filter_value:input').map(function() 
    if ($(this).data('multiselect')) 
      return $(this).find('option:selected').map(function() 
        return $(this).val();
      ).get();
     else 
      return $(this).val();
    
  ).get();
  return filters.push(
    name: filterName,
    value: filterValues
  );
);

filterValues 的当前结果： ["A","B","Joe"]

上面的代码最终为filterValues生成了一个数组["A","B","Joe"]。

我认为这可能是因为.get() 将所有内容都转换为扁平数组。我尝试使用 $.makeArray() 而不是 .get() 并得到相同的结果，但也许我错过了一些东西。

filterValues 的期望结果： [["A","B"],"Joe"]

我希望生成的是[["A","B"],"Joe"]，因此很明显，第一个元素（在此示例中）是从多选到后端的选定值的集合。

如何调整上面的代码以相当优雅的方式获得所需的结果（对于多选和单个输入的任何组合或排序）？ 该代码旨在应用于任何动态创建的过滤器，因此可重用，而不是对每个过滤器进行硬编码。

【参考方案1】：

好的，经过一整夜的休息，我马上得到了答案，现在看起来很明显 - 只需将 multiselect 包裹在 .get() 之后的数组括号中！ - 哦。有时在这里记录问题会迫使解决方案冒泡或突出我所缺少的。

filters = []
$(@customFilterElements.selector).each ->
  filterName = $(@).find('.filter_entry .filter_name:input').val()
  filterValues = $(@).find('.filter_entry .filter_value:input').map(->
   if $(@).data('multiselect')
     [$(@).find('option:selected').map(->
       $(@).val()
     ).get()]
   else
     $(@).val()
  ).get()
  filters.push(name: filterName, value: filterValues)