要设置HTML <select>
元素的默认值,您需要在 <option>
标签中使用 selected
属性。以下是一个简单的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置默认值</title>
</head>
<body>
<form>
<label for="cars">选择一辆车:</label>
<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>
</form>
</body>
</html>
在这个示例中,<option>
标签中的 selected
属性被添加到了 "Saab" 这个选项上。当页面加载时,"Saab" 将作为 <select>
元素的默认值显示。
原因:
selected
属性没有正确添加到 <option>
标签中。解决方法:
selected
属性正确添加到 <option>
标签中。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置默认值</title>
<script>
window.onload = function() {
// 确保不会覆盖默认值
var selectElement = document.getElementById('cars');
if (selectElement.value !== 'volvo') {
selectElement.value = 'volvo';
}
};
</script>
</head>
<body>
<form>
<label for="cars">选择一辆车:</label>
<select id="cars" name="cars">
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
在这个示例中,JavaScript 代码确保页面加载后默认值为 "Volvo"。
希望这些信息对您有所帮助!
领取专属 10元无门槛券
手把手带您无忧上云