如何使用JavaScript选择选项?

时间:2018-12-07 10:23:08

标签: javascript reactjs select

我在JavaScript中选择存在问题。我想更改选择的选项。该选项正在更改,但是文本是默认设置。这是为什么?我可以更改我的代码吗?我需要超时,因为脚本加载缓慢。

   setTimeout(() => {
        if(this.props.Locale === "en-EN") {
            let country = document.getElementById("Country");
            country.getElementsByTagName("option")[10].selected = "selected";
        }
    }, 3000);

1 个答案:

答案 0 :(得分:1)

您可以使用value组件的select属性来控制选定的选项。您可以将其绑定到状态中的项目,然后将其设置为所需的任何状态。我在下面给出了一个示例,它并不是特别出色的代码,但演示了它可能如何工作:

class App extends React.Component {
  state = {
    selectedOption: 2,
  }
  
  updateSelectedOption(newValue) {
    this.setState({
      selectedOption: newValue
    });
  }

  render() {
    return (
    <div>
        <select
          onChange={({ target }) => { this.updateSelectedOption(target.value) }}
          value={this.state.selectedOption}
        >
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
        <button onClick={() => this.updateSelectedOption(1)}>1</button>
        <button onClick={() => this.updateSelectedOption(5)}>5</button>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>