如何为select组件设置默认值？两种场景实现方案咨询

针对你需要的两种场景，下面给出具体的实现方法，包含原生JS和主流框架的示例：

场景1：默认值固定且不可修改 #

核心逻辑是先设置选中值，再禁用select组件，用户无法切换选项。

原生JS实现 #

<!-- 已有组件（示例用隐藏input存储之前的选择值） -->
<input type="hidden" id="savedCountry" value="德国">

<!-- 目标Select字段 -->
<select id="countrySelect">
  <option value="中国">中国</option>
  <option value="德国">德国</option>
  <option value="美国">美国</option>
</select>

<script>
// 获取之前保存的国家值
const savedCountry = document.getElementById('savedCountry').value;
const countrySelect = document.getElementById('countrySelect');

// 自动选中目标值
countrySelect.value = savedCountry;
// 禁用组件，禁止用户修改
countrySelect.disabled = true;
</script>

Vue 3实现 #

<template>
  <select v-model="selectedCountry" disabled>
    <option value="中国">中国</option>
    <option value="德国">德国</option>
    <option value="美国">美国</option>
  </select>
</template>

<script setup>
import { ref } from 'vue';
// 从其他组件/状态管理中获取之前的选择值
const selectedCountry = ref('德国');
</script>

场景2：默认值可修改，支持切换其他选项 #

只需要设置默认选中值，不做禁用处理，用户可自由切换。

原生JS实现 #

<input type="hidden" id="savedCountry" value="德国">

<select id="countrySelect">
  <option value="中国">中国</option>
  <option value="德国">德国</option>
  <option value="美国">美国</option>
</select>

<script>
const savedCountry = document.getElementById('savedCountry').value;
const countrySelect = document.getElementById('countrySelect');

// 自动选中目标值，用户可正常修改
countrySelect.value = savedCountry;
</script>

React实现 #

import { useState } from 'react';

function CountrySelect() {
  // 从父组件Props/Context中获取之前的选择值
  const initialCountry = '德国';
  const [selectedCountry, setSelectedCountry] = useState(initialCountry);

  return (
    <select 
      value={selectedCountry}
      onChange={(e) => setSelectedCountry(e.target.value)}
    >
      <option value="中国">中国</option>
      <option value="德国">德国</option>
      <option value="美国">美国</option>
    </select>
  );
}

关键注意事项 #

• 确保select的option的value与已有组件的值完全匹配（包括大小写、拼写），否则无法自动选中。
• 如果已有组件的值是动态变化的（比如用户在其他模块修改了国家），需要监听值的变化并同步更新：
  • 原生JS可通过addEventListener监听源组件的变化；
  • 框架中利用响应式数据（Vue的ref/reactive、React的state）可自动同步。

内容的提问来源于stack exchange，提问作者Fjosh33