选中指定select中的第一个

### 实现 HTML `<select>` 默认选中第一个选项并显示 `value` 属性 在标准的 HTML 中，可以通过设置 `<option>` 的 `selected` 属性来实现默认选中的效果。如果希望自动选中第一个选项，则可以动态地为第一个 `<option>` 添加该属性。 以下是具体方法： #### 方法一：手动指定 `selected` 属性 通过直接在 HTML 中定义 `selected` 属性，可以让某个特定的 `<option>` 成为默认选中项。 ```html <select> <option value="1" selected>选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> ``` 在此例子中，“选项1”会被默认选中，并且其 `value` 值会作为当前 `<select>` 元素的值[^1]。 --- #### 方法二：JavaScript 动态设置默认选中 当数据是从接口或其他地方动态加载时，无法提前知道具体的选项内容。此时可借助 JavaScript 来动态设置默认选中项。 以下是一个简单的示例： ```javascript // 获取 select 元素 const selectElement = document.querySelector('select'); // 设置第一个 option 为默认选中 if (selectElement.options.length > 0) { selectElement.selectedIndex = 0; } ``` 对应的 HTML 结构如下： ```html <select id="dynamicSelect"> <!-- 数据由脚本填充 --> </select> <script> const optionsData = [ { value: '1', text: '选项1' }, { value: '2', text: '选项2' }, { value: '3', text: '选项3' } ]; const selectElement = document.getElementById('dynamicSelect'); // 遍历数据并创建 option 元素 optionsData.forEach((item, index) => { const option = new Option(item.text, item.value); selectElement.add(option); // 如果是第一个选项，默认选中 if (index === 0) { option.selected = true; } }); </script> ``` 在这个例子中，无论有多少个选项被添加到 `<select>` 中，始终会将第一个选项设为默认选中状态[^2]。 --- #### 方法三：Vue.js 绑定默认值 如果你正在使用 Vue.js 框架开发项目，可以直接绑定 `v-model` 到初始值上，从而让 `<select>` 自动选中对应的数据项。 例如： ```vue <template> <div> <select v-model="selectedValue"> <option v-for="(item, index) in optionsList" :key="index" :value="item.value">{{ item.label }}</option> </select> </div> </template> <script> export default { data() { return { optionsList: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' } ], selectedValue: '' // 初始化为空字符串 }; }, mounted() { this.setDefaultSelected(); }, methods: { setDefaultSelected() { if (this.optionsList.length > 0) { this.selectedValue = this.optionsList[0].value; // 设为首项的 value } } } }; </script> ``` 此代码片段展示了如何利用 Vue 的生命周期钩子函数，在组件挂载完成后初始化默认选中值[^3]。 --- ### 总结 以上三种方式分别适用于不同的场景需求——纯静态页面、动态生成 DOM 和基于前端框架的应用程序。开发者可以根据实际业务逻辑选择最适合的方式完成目标功能。