Javascript 从<；选择>；在React中具有多个选项

设置为选择框选择哪个选项的反应方式是在

本身上设置一个特殊的

值

道具，对应于您希望选择的

元素上的

值

属性。对于<代码>多个选择此道具可以接受数组

现在因为这是一个特殊属性，我想知道当用户更改内容时，在同一个选项值数组结构中检索所选选项的规范方法是什么（这样我就可以通过回调将其传递给父组件等），因为假定相同的

值

属性在DOM元素上不可用

例如，对于文本字段，您可以执行以下操作（JSX）：

---

与您在其他任何地方的做法相同，因为您使用的是真正的DOM节点作为更改事件的目标：

handleChange: function(e) {
  var options = e.target.options;
  var value = [];
  for (var i = 0, l = options.length; i < l; i++) {
    if (options[i].selected) {
      value.push(options[i].value);
    }
  }
  this.props.someCallback(value);
}

handleChange:函数（e）{
var options=e.target.options；
var值=[]；
对于（变量i=0，l=options.length；i

以下几点对我很有用

var selectBoxObj = React.findDOMNode(this.refs.selectBox)
var values = $(selectBoxObj).val()

---

如果要使用

ref

，可以获得如下所示的选定值：

var select = React.findDOMNode(this.refs.selectRef); 
var values = [].filter.call(select.options, function (o) {
      return o.selected;
    }).map(function (o) {
      return o.value;
    });

2018ES6更新

  let select = this.refs.selectRef;
  let values = [].filter.call(select.options, o => o.selected).map(o => o.value);

---

如果您希望在填写表单时跟踪所选选项：

handleChange(e) {
    // assuming you initialized the default state to hold selected values
    this.setState({
        selected:[].slice.call(e.target.selectedOptions).map(o => {
            return o.value;
        });
    });
}

selectedOptions

是与DOM相关的元素的类似数组的集合/列表。选择选项值时，可以在事件目标对象中访问它

Array.prototype.slice

和

call

允许我们为新状态创建它的副本。您还可以使用ref（如果您没有捕获事件）以这种方式访问这些值，这是问题的另一个答案

另一种方法：

handleChange({ target }) {
    this.props.someCallback(
       Array.prototype.slice.call(target.selectedOptions).map(o => o.value)
    )
}

最简单的方法

handleChange(evt) {
  this.setState({multiValue: [...evt.target.selectedOptions].map(o => o.value)}); 
}

试试这个：

dropdownChanged = (event) => {
    let obj = JSON.parse(event.target.value);
    this.setState(
        {
            key: obj.key,
            selectedName: obj.name,
            type: obj.type
        });
}


<select onChange={this.dropdownChanged} >
<option value={JSON.stringify({ name: 'name', key: 'key', type: "ALL" })} >All Projetcs and Spaces</option></select>

dropdownChanged=（事件）=>{
让obj=JSON.parse（event.target.value）；
这是我的国家(
{
key:obj.key，
selectedName:obj.name，
类型：obj.type
});
}
所有项目和空间

使用

Array.from（）

和

e.target.selectedOptions

可以执行受控的多选操作：

handleChange = (e) => {
  let value = Array.from(e.target.selectedOptions, option => option.value);
  this.setState({values: value});
}

target.selectedOptions返回HTMLCollection

---

您实际上可以在目标中找到

所选选项

。。。无需迭代所有选项。假设您希望将值发送到作为道具传递给组件的

onChange

函数：您可以在多重选择的

onChange

上使用以下函数

onSelectChange = (e) => {
    const values = [...e.target.selectedOptions].map(opt => opt.value);
    this.props.onChange(values);
  };

---

CoffeeScript版本：

（option.selected时e.target.options中option的option.value）

ES6版本：[…event.target.options].filter（o=>o.selected.map（o=>o.value）还可以分解ES6箭头：

[…e.target.options]。filter（{selected}=>selected）。map（{value}=>value）

RE:ES6版本，虽然看起来不错，但它不起作用

event.target.options

是一个

HTMLOptionsCollection

，而不是数组。@zrisher负片，幻影骑士

htmloptionscolection

不可编辑。但是，

Array.from

仍然可以使用它：

Array.from（event.target.options）、filter（o=>o.selected）、map（o=>o.value）

Correct，我使用JQuery来检索多个值。您不需要react dom或JQuery。只需从onChange事件中检索值，正如我在另一条评论中提到的，浏览器对

selectedOptions

的支持似乎相当粗略。但是如果有支持的话，这可能是一个理想的解决方案。啊，是的，似乎IE仍然不支持这一点。我也会用它来代替我的答案，因为

selectedOptions

在IE中不受支持。这里有一个更干净的es6方法：）[].filter.call（this.refs.selectRef.options，o=>o.selected）。map（o=>o.value）；为您的解决方案添加更多解释。关于如何将多个

select

s中的选定选项组合到一个数组中，有什么想法吗？请在通过

document.querySelectorAll（'select'）获取所有选项后说

？请注意，在提出此问题时，

selectedOptions

没有很好的兼容性，IE仍然不支持它。不过，这将是解决此问题的现代方法。在提出此问题时，

selectedOptions

没有很好的兼容性。Internet Explorer仍然不支持它，因此不需要重新安装如果您需要IE支持（至少不需要polyfill），可以使用。这很好，但是

HTMLCollectionOf

不是数组…显然

array.from

可以工作。

handleChange = (e) => {
  let value = Array.from(e.target.selectedOptions, option => option.value);
  this.setState({values: value});
}

onSelectChange = (e) => {
    const values = [...e.target.selectedOptions].map(opt => opt.value);
    this.props.onChange(values);
  };