###
设置 `<
select>` 元素的
默认值
在 HTML 和 JavaScript 中，可以通过多种方式
设置 `<
select>` 下拉框的
默认值。以下是详细的实现方法：
#### 1. 使用 HTML 的 `
selected` 属性
在定义 `<option>` 标签时，可以使用 `
selected` 属性来指定默认选中的选项[^1]。
```html
<
select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab"
selected>Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</
select>
```
上述代码中，`Saab` 被
设置为默认选中的选项。
#### 2. 使用 JavaScript 动态
设置默认值
通过 JavaScript，可以动态地更改 `<
select>` 元素的
默认值。以下是一个示例：
```javascript
var
selectElement = document.getElementById('sel');
selectElement.value = "B"; //
设置默认值为 "B"
```
此代码片段将 `<
select>` 元素的值
设置为 `"B"`，即对应的 `<option>` 将被选中[^2]。
#### 3. 根据隐藏字段动态
设置默认值
如果需要根据隐藏字段的值动态
设置 `<
select>` 的
默认值，可以参考以下代码：
```html
<
select id="
selectY" name="job">
<option value="searchUserinfo.action?job_value=0">所有用户</option>
<option value="searchUserinfo.action?job_value=10010">java工程师</option>
<option value="searchUserinfo.action?job_value=10011">c开发工程师</option>
<option value="searchUserinfo.action?job_value=10012">web前端工程师</option>
</
select>
<input id="option_num" type="hidden" value="2">
<script>
var i = document.getElementById("option_num").value;
var
select = document.getElementById("
selectY");
var arr =
select.getElementsByTagName("option");
arr[i].
selected = "
selected"; // 根据隐藏字段的值
设置默认选项
</script>
```
上述代码中，隐藏字段 `option_num` 的值为 `"2"`，因此 `<
select>` 的
默认值被
设置为第三个选项 `"c开发工程师"`[^3]。
#### 4. 在框架中
设置默认值
在一些前端框架中，例如 Vue 或 Layui，可以通过特定的方法
设置 `<
select>` 的
默认值。
##### Vue 示例
在 Vue 中，可以通过 `v-model` 绑定变量，并初始化该变量的值来
设置默认值：
```html
<template>
<el-
select v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-
select>
</template>
<script>
export default {
data() {
return {
value: 'java工程师', //
默认值
options: [
{ value: '所有用户', label: '所有用户' },
{ value: 'java工程师', label: 'java工程师' },
{ value: 'c开发工程师', label: 'c开发工程师' },
{ value: 'web前端工程师', label: 'web前端工程师' }
]
};
}
};
</script>
```
##### Layui 示例
在 Layui 中，可以通过 JavaScript
设置 `<
select>` 的
默认值，并重新渲染表单以应用更改：
```html
<form class="layui-form" action="">
<div class="layui-input-block layui-form" lay-filter="selFilter">
<
select id="sel" lay-verify="required" lay-filter="selFilter">
<option value="">请选择</option>
<option value="A">选项A</option>
<option value="B">选项B</option>
</
select>
</div>
</form>
<script>
layui.use('form', function() {
var form = layui.form;
var $ = layui.$;
$("#sel").val("B"); //
设置默认值为 "B"
form.render('
select', 'selFilter'); // 重新渲染表单
});
</script>
```
###
本文详细介绍了在Angular中如何正确地为表单元素设置默认值，包括使用[ngModel]和formControlName绑定时的注意事项，确保select元素能够根据预设数据正确初始化。
扫一扫
4144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
