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

我会保持简单。首先，这些是从更大的文档中提取的片段。因此，是的，我有适当的标题和源引用，等等

我有一个

选择

框。我知道如何基于单个值选择调用函数。我想知道当选择框允许多个值时，如何具体调用此函数

showOnly（）

选择

框已打开

 <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> 

想法//谢谢你的考虑

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

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

无论何时调用

showOnly（）

方法，都要传递希望调用此函数的select dom的

id

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

---

或者，如果您希望选择在其他按钮上工作，则从关联的select下拉列表中按id获取并

id

，然后将其传递给函数。

由于

htmloptionscolection

是类似于数组的对象，我不熟悉使用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);

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);

const select=document.getElementById（'select_a'）；
更改时的常量=（事件）=>{
const options=event.target.options；
让值=[]；
对于（变量i=0；i

JS Bin：

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

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);

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);

var select=document.getElementById（'select_a'）；
变量变化=功能（事件）{
var options=event.target.options；
var值=[]；
对于（变量i=0；i

有一个内置的对象

函数

作为一个名为

参数

的属性，它是一个局部变量，可以传递无限量的值

arguments

是一个数组，它将索引它给定的每个值，并且它有两个方法，包括length。我不知道我的示例是否有效，因为这些函数和变量中有一半没有提供

collArgs（）

应该能够获取大量参数，并以类似索引数组的方式返回值。从那里，我分配了

值

来存储

参数的值

，现在它可以传递到函数中

请阅读本文以获得更好的解释和工作示例 args=新参数（）

函数collArgs（）{
for（var i=0；i};第二个选项如何？…首先，感谢您的帮助。。。所以，我是个笨蛋。我尝试添加元素id
“#select_b”
（它取代了select_a），只要您有
idOfSelect
。它不允许我将其添加到函数showOnly（filterName，idOfSelect）

中，它需要在其中定义一个参数或值。添加到colOfSelectionOpt的定义会生成以下错误

null不是对象（评估'document.getElementById（'select#b'））.selectedOptions；

@Hellyar您的html是否有

select

下拉列表和

id

select\u b

？现在有了，但它只是一个小的编辑，因此不会与我的实际测试页面相矛盾。请注意原始的

函数showlonly（filterName，values）