在onchange事件中获取HTML select多选框的所有值

Question

我有一个带有多选的表单。我想在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>

- user3065901

---

你是在使用jQuery吗？还是纯粹的JavaScript？ - Zander

你可以在这里查看：https://dev59.com/ZW025IYBdhLWcg3wqn8N - Thomas Theunen

可以使用 myarray.selectedOptions。 - Sebastian Simon

这回答解决了你的问题吗？如何获取多选框中所有选定值？ - Jakub Kukul

Answer 1

这个例子可以在不使用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>

- Thomas Theunen

Answer 2

您可以使用jQuery来解决它：

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

- PhuLuong

Answer 3

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

<select id="my-array" multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

const myArray = document.getElementById('my-array');
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);
});

- Jeremy

Answer 4

一个ES6的答案：

let options: HTMLOptionElement[] = Array.from(event.target.options);

let selected = options
.filter(o => o.selected)
.map(o => o.value);

- dessalines