如何设置选中的默认选项？

在不同的编程环境和框架中，设置默认选中选项的方法可能会有所不同。以下是一些常见的情况和方法：

HTML 中的 `<select>` 元素

在 HTML 中，如果你有一个下拉列表（<select>），可以通过设置 selected 属性来指定默认选项。

<select name="example">
  <option value="option1">Option 1</option>
  <option value="option2" selected>Option 2</option>
  <option value="option3">Option 3</option>
</select>

在这个例子中，“Option 2”将会是默认选中的选项。

JavaScript 设置默认选项

如果你需要通过 JavaScript 动态设置默认选项，可以这样做：

document.addEventListener('DOMContentLoaded', function() {
  var selectElement = document.querySelector('select[name="example"]');
  selectElement.value = 'option2'; // 设置默认选中的值
});

React 中设置默认选项

在 React 中，你可以在组件的状态中设置默认值，并在渲染时使用这个值。

import React, { useState } from 'react';

function ExampleSelect() {
  const [selectedOption, setSelectedOption] = useState('option2');

  return (
    <select value={selectedOption} onChange={(e) => setSelectedOption(e.target.value)}>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}

export default ExampleSelect;

Angular 中设置默认选项

在 Angular 中，你可以使用 [(ngModel)] 双向绑定来设置默认值。

<select [(ngModel)]="selectedOption">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

import { Component } from '@angular/core';

@Component({
  selector: 'app-example-select',
  templateUrl: './example-select.component.html',
  styleUrls: ['./example-select.component.css']
})
export class ExampleSelectComponent {
  selectedOption = 'option2';
}

Vue.js 中设置默认选项

在 Vue.js 中，你可以在 data 函数中设置默认值。

<template>
  <select v-model="selectedOption">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 'option2'
    };
  }
};
</script>