将多个 Select 值传递给 Javascript API 函数

Question

我会保持这个简单。首先，这些是从较大文档中提取的片段。所以是的，我有正确的 headers 和来源参考等

我有一个 select 盒子。我知道如何根据单个值 selection 调用函数。我想知道当 select 框允许 multiple 值时如何具体调用此函数 showOnly()。

select框是

 <select id="select_a" name="color" multiple>
     <option selected="selected" class="options">Select desired detail</option>
     <option value="None" class="options" >None</option>        
     <option value="Investment Category" class="options">Investment Category</option>
     <option value="Company" class="options">Company</option>
     <option value="Budget Line" class="options">Budget Line</option>
     <option value="Market" class="options">Market</option>
     <option value="Organization" class="options">Organization</option>
     <option value="Segment" class="options">Segment</option>  
 </select>

那么，如何将 multiple 值连接到下面的函数 showOnly()。使用一个值，showOnly() 可能看起来像这样 showOnly('Segment','Cars')。我知道具有多个值的 showOnly 会喜欢 showOnly('Segment,['Cars','Boats','Planes'])。这是函数 showOnly()

function showOnly(filterName, values) {
  sheet = mainViz.getWorkbook().getActiveSheet();
  if(sheet.getSheetType() === 'worksheet') {
    sheet.applyFilterAsync(filterName, values, 'REPLACE');
  } else {

    worksheetArray = sheet.getWorksheets();
    for(var i = 0; i < worksheetArray.length; i++) {
        worksheetArray[i].applyFilterAsync(filterName, values, 'REPLACE');
      }
   }
};

想法?? //感谢您的考虑。

Answer 1

 var colOfSelectedOpt = document.getElementById("select_a").selectedOptions;

 var values = [];
 for(var i=0;i<colOfSelectedOpt.length;i++) {
         values.push(colOfSelectedOpt[i].value);
    }

values 应该给你 selected 项目数组。您可以在调用之前将其传递给函数或传递 select 的 id 并在函数内获取值。

更新

function showOnly(filterName, idOfSelect) {

    var colOfSelectedOpt = document.getElementById(idOfSelect).selectedOptions;

    var values = [];
    for(var i=0;i<colOfSelectedOpt.length;i++) {
         values.push(colOfSelectedOpt[i].value);
    }      

 sheet = mainViz.getWorkbook().getActiveSheet();
     if(sheet.getSheetType() === 'worksheet') {
         sheet.applyFilterAsync(filterName, values, 'REPLACE');
      } else {

         worksheetArray = sheet.getWorksheets();
         for(var i = 0; i < worksheetArray.length; i++) {
        worksheetArray[i].applyFilterAsync(filterName, values, 'REPLACE');
       }
  }
 };

每当您调用 showOnly() 方法时，传递 select dom 的 id，您希望为其调用此函数。

 <select id="select_a" name="color" onchange="showOnly('filterName', this.getAttribute('id'));" multiple>

或者，如果您希望 selection 在其他按钮上工作，则通过 id 从关联的 select 下拉列表中获取并 id 并将其传递给函数。

Answer 2

由于 HTMLOptionsCollection 是类似数组的对象，我不熟悉使用 Array.prototype.map() 创建新的选定值数组的任何方法。但是我们总是可以使用老式的 for 循环。这是一个 ES6 方法：

const select = document.getElementById('select_a');
const on_change = (event) => {
  const options = event.target.options;
  let values = [];
  for (var i = 0; i < options.length; i++) {
    if (options[i].selected) {
          values.push(options[i].value);
    }
  }

  console.log('Pass these values to your function:', values);
};

select.addEventListener('change', on_change);

JS斌：http://jsbin.com/yemoxizaso/1/edit?js,console,output

如果您不能使用 ES6，这里有一个 ES5 方法：

var select = document.getElementById('select_a');
var on_change = function(event) {
  var options = event.target.options;
  var values = [];
  for (var i = 0; i < options.length; i++) {
    if (options[i].selected) {
          values.push(options[i].value);
    }
  }

  console.log('Pass these values to your function:', values);
};

select.addEventListener('change', on_change);

Answer 3

有一个名为 arguments 的 Function 作为属性的内置对象，它是一个可以传入无限量值的局部变量。 arguments 类似于数组，因为它会索引给定的每个值，并且它有几个方法，包括长度。我不知道我的示例是否有效，因为没有提供一半的函数和变量。 collArgs() 应该能够采用一些参数和 return 以类似索引数组的方式获取值。从那里，我已经指定 values 来存储 arguments 的值，现在它可以传递到您的函数中。

请阅读此 article 以获得更好的解释和工作示例 args = 新参数()

function collArgs() {
  for (var i = 0; i < arguments.length; i++) {
   arguments[i];
  }
  return arguments;
}

var values = collArgs();

function showOnly(filterName, values) {
  var sheet = mainViz.getWorkbook().getActiveSheet();
  if(sheet.getSheetType() === 'worksheet') {
    sheet.applyFilterAsync(filterName, values, 'REPLACE');
  } else {

    var worksheetArray = sheet.getWorksheets();
    for(var i = 0; i < worksheetArray.length; i++) {
        worksheetArray[i].applyFilterAsync(filterName, values, 'REPLACE');
      }
   }
};

将多个 Select 值传递给 Javascript API 函数

Pass Multiple Select Values to a Javascript API function

javascript

jquery

tableau-api