Javascript 获取每个onChange事件上的所有选定选项

我有几个由地图生成的select元素。除了使用jQuery访问dom元素外，还有一种方法可以在更改时获取所有选定的值吗

changed = () => {
 // Keep track of all the selected options
}
[1,2,3].map(value => (
<select onChange={changed}>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>)

changed=（）=>{
//跟踪所有选定的选项
}
[1,2,3]。映射（值=>(
1.
2.
3.
)

---

每当我选择一个选项时，我都希望跟踪在数组中选择的选项。如果在第一次选择中我选择了1，那么在第二次选择中我希望有一个表示所选选项的数组[1,2]。如果然后我选择第三个选项为3，那么新数组应该为[1,2,3]。在这种情况下，我需要三个单独的select，并且我希望跟踪在每个

中选择的选项，假设您在代码中使用钩子

import React, { useState, useEffect } from "react";

    const App = () => {
      useEffect(() => {
        console.log("selections: ", selections);
      });
      const [selections, setSelections] = useState({});

      const changed = (value, e) => {
        setSelections({ ...selections, [`${value}`]: e.target.value });
      };

      return (
        <div>
          {[1, 2, 3].map(value => (
            <select key={value} onChange={e => changed(value, e)}>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
          ))}
        </div>
     );
   };

export default App;

import React，{useState，useffect}来自“React”；
常量应用=（）=>{
useffect（（）=>{
日志（“选择：”，选择）；
});
const[selections，setSelections]=useState（{}）；
常量更改=（值，e）=>{
设置选择（{…选择，[`${value}`]：e.target.value}）；
};
返回(
{[1,2,3]。映射（值=>(
已更改（值，e）}>
1.
2.
3.
))}
);
};
导出默认应用程序；

更新：我更新了我的解决方案，很抱歉误解了您的问题，如果有多个下拉列表，您的州应该这样构造：

{“1:1,2:3,3:1}

---

键是下拉标识符，值是它的选定选项。

我已经为您编写了使用React类和functional component的示例

如果您想使用多个值的SELECT，您必须将select <代码>多个属性设置为<代码> Trime< /Cord>。注意选择非常难进行样式化，您可以考虑使用自定义<强>下拉< /强>。

import React from 'react';
import ReactDOM from 'react-dom';

class ClassExample extends React.Component {
  state = {
    value: [],
  }

  handleOnChange = (e) => {
    const { value: selectedValue } = e.target;
    const { value } = this.state;
    const newValue = [].concat(value);
    const index = newValue.findIndex(v => v === selectedValue);
    if (index > -1) {
      newValue.splice(index, 1);
    } else {
      newValue.push(selectedValue);
    }
    this.setState({ value: newValue });
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        <select
          value={value}
          multiple
          onChange={this.handleOnChange}
        >
          {[1, 2, 3].map(v => <option key={v} value={v}>{v}</option>)}
        </select>
        <pre>
          {JSON.stringify(value, null, 2)}
        </pre>
      </div>
    )
  }
}

const FunctionExample = () => {
  const [value, setValue] = React.useState([]);
  const handleOnChange = (e) => {
    const { value: selectedValue } = e.target;
    const newValue = [].concat(value);
    const index = newValue.findIndex(v => v === selectedValue);
    if (index > -1) {
      newValue.splice(index, 1);
    } else {
      newValue.push(selectedValue);
    }
    setValue(newValue);
  }
  return (
    <div>
      <select
        value={value}
        multiple
        onChange={handleOnChange}
      >
        {[1, 2, 3].map(v => <option key={v} value={v}>{v}</option>)}
      </select>
      <pre>
        {JSON.stringify(value, null, 2)}
      </pre>
    </div>
  )
}

const App = () => (
  <>
    <label>
      Class : <ClassExample />
    </label>
    <label>
      Function : <FunctionExample />
    </label>
  </>
)

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
类实例扩展了React.Component{
状态={
值：[]，
}
变化=（e）=>{
const{value:selectedValue}=e.target；
const{value}=this.state；
const newValue=[].concat（值）；
const index=newValue.findIndex（v=>v==selectedValue）；
如果（索引>-1）{
新值。拼接（索引，1）；
}否则{
newValue.push（selectedValue）；
}
this.setState（{value:newValue}）；
}
render（）{
const{value}=this.state；
返回(
{[1,2,3].map（v=>{v}}
{JSON.stringify（值，null，2）}
)
}
}
常量函数示例=（）=>{
const[value，setValue]=React.useState（[]）；
常数变化=（e）=>{
const{value:selectedValue}=e.target；
const newValue=[].concat（值）；
const index=newValue.findIndex（v=>v==selectedValue）；
如果（索引>-1）{
新值。拼接（索引，1）；
}否则{
newValue.push（selectedValue）；
}
设置值（新值）；
}
返回(
{[1,2,3].map（v=>{v}}
{JSON.stringify（值，null，2）}
)
}
常量应用=（）=>(
类别：
功能：
)
const rootElement=document.getElementById（'root'）；
ReactDOM.render（
欢迎使用SO！这里没有太多的工作要做。你能展示你的
更改的
函数和足够的代码来创建一个吗？我不完全清楚你想要完成什么。谢谢你的澄清。@ggorlen我对这个问题做了编辑，也许这次更清楚。我希望…她正在尝试向我们添加选项值仅包含所选选项列表的数组。即每次选择一个选项时，应将该值添加到数组中，如果未选择该选项，则应从数组中删除该值。可以使数组索引和值相同，或者索引可以是选项值，数组的值可以为1表示真，这样可以选择数组索引更容易，因为她可以选择[HtmleElement.value]。推送并选择[HtmleElement.value].popWell我建议有一种方法删除一个选项，但在再次查看问题后，她只想在每次选择值时向数组中添加值，因此我猜推送值，如果她希望值按顺序排列，那么她可以使用排序选项，抱歉，我没有回答，因为我没有实际计算出解决方案离子，因为我不在我的电脑和尾波的iOS是真的很慢笑