Html选择多个在onchange事件中获取所有值答案

【问题标题】：Html select multiple get all values at onchange eventHtml选择多个在onchange事件中获取所有值
【发布时间】：2015-08-03 00:46:46
【问题描述】：

我有一个带有多个选择的表单。我想在 onchange 事件中获取所有选定的值，但我不知道这是否可能。我认为“this.value”只返回选择的最后一个元素。

是否可以在onchange时将所有元素选为数组？？

提前致谢。

<select name="myarray[]" id="myarray" class="select2-select req" style="width: 90%;" onChange="get_values(this.value)" multiple>
    {foreach key=key item=value from=$myarray}
         <option value="{$key}" >{$value}</option>
    {/foreach}
</select>

【问题讨论】：

你在使用 jQuery 吗？或者只是普通的javascript
你可以看这里：stackoverflow.com/questions/5866169/…
可以使用myarray.selectedOptions。
这能回答你的问题吗？ How to get all selected values of a multiple select box?

标签： javascript html select onchange multi-select

【解决方案1】：

你可以用jquery来解决：

get_values=function(){
    var retval = [];    
    $("#myarray:selected").each(function(){
        retval .push($(this).val()); 
    });
    return retval;
};

【讨论】：

【解决方案2】：

这个例子在没有 jQuery 的情况下可能会有所帮助：

function getSelectedOptions(sel) {
  var opts = [],
    opt;
  var len = sel.options.length;
  for (var i = 0; i < len; i++) {
    opt = sel.options[i];

    if (opt.selected) {
      opts.push(opt);
      alert(opt.value);
    }
  }

  return opts;
}

<select name="myarray[]" id="myarray" class="select2-select req" style="width: 90%;" onChange="getSelectedOptions(this)" multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

【讨论】：

【解决方案3】：

在下面的示例中，我正在构建选定选项和选定值的数组：

<select id="myarray" multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

const myarray = document.getElementById('myarray');
myarray.addEventListener('change', (e) => {

  const options = e.target.options;
  const selectedOptions = [];
  const selectedValues = [];

  for (let i = 0; i < options.length; i++) {
    if (options[i].selected) {
      selectedOptions.push(options[i]);
      selectedValues.push(options[i].value);
    }
  }

  console.log(selectedOptions);
  console.log(selectedValues);
});

【讨论】：