如何设置select选项默认值？

一、使用selected属性设置默认选项

在HTML的select标签中，可以使用selected属性来设置选项的默认值。

<select>
  <option value="1">选项1</option>
  <option value="2" selected>选项2</option>
  <option value="3">选项3</option>
</select>

在上面的代码中，选项2将会是默认选中的选项。

二、使用JavaScript动态设置默认选项

如果需要在页面加载后动态设置select选项的默认值，可以使用JavaScript来实现。

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>
<script>
  document.getElementById("mySelect").value = "2";
</script>

在上面的代码中，id为mySelect的select元素的默认值将会被设置为2。

三、使用jQuery动态设置默认选项

如果使用jQuery来操作DOM，可以使用val()方法来动态设置select选项的默认值。

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>
<script>
  $("#mySelect").val("2");
</script>

在上面的代码中，id为mySelect的select元素的默认值将会被设置为2。

四、使用React组件设置默认选项

如果使用React来开发Web应用，可以通过设置组件的state来动态设置select选项的默认值。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: "2"
    };
  }
  render() {
    return (
      <select value={this.state.selectedOption} onChange={this.handleChange}>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
      </select>
    );
  }
  handleChange = (event) => {
    this.setState({ selectedOption: event.target.value });
  }
}

在上面的代码中，组件的state中的selectedOption属性的值为2，因此选项2将会是默认选中的选项。当用户选择其他选项时，handleChange方法将会更新组件的state。