Change Select Default Value

创作时间:

作者:

@小白创作中心

Change Select Default Value

引用

来源

https://docs.pingcode.com/baike/2387800

要使用JavaScript更换

元素的值。这是最常见的方法，适用于需要动态修改选项值的情况。以下是详细步骤：

1.1 获取和设置

元素的引用，然后设置其值为新的默认选项。以下是示例代码：

<!DOCTYPE html>
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Change Select Default Value</title>  
</head>  
<body>  
    <select id="mySelect">  
        <option value="1">Option 1</option>  
        <option value="2">Option 2</option>  
        <option value="3">Option 3</option>  
    </select>  
    <script>  
        // 获取<select>元素  
        var selectElement = document.getElementById('mySelect');  
        // 设置新的默认值  
        selectElement.value = '2';  
    </script>  
</body>  
</html>

在上述代码中，通过
document.getElementById
方法获取

元素：

<script>  
    // 使用querySelector获取元素  
    var selectElement = document.querySelector('#mySelect');  
    // 设置新的默认值  
    selectElement.value = '3';  
</script>

querySelector
方法更通用，可以通过选择器语法获取任何符合条件的元素。

二、初始化时指定默认值

在页面加载时，就可以通过JavaScript设置

的默认值：

<script>  
    window.onload = function() {  
        var selectElement = document.getElementById('mySelect');  
        selectElement.value = '1';  
    };  
</script>

这种方法确保了在DOM完全加载后再进行操作，避免了潜在的DOM未加载完毕导致的错误。

2.2 使用

DOMContentLoaded
事件

DOMContentLoaded
事件在DOM加载完成后触发，比
window.onload
更早：

<script>  
    document.addEventListener('DOMContentLoaded', function() {  
        var selectElement = document.getElementById('mySelect');  
        selectElement.value = '2';  
    });  
</script>

这种方法同样确保了DOM加载完成后再进行操作，但比
window.onload
更快响应。

三、通过事件监听器动态更改

在某些情况下，需要根据用户操作动态更改

默认值的示例：

<!DOCTYPE html>
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Change Select Default Value</title>  
</head>  
<body>  
    <select id="mySelect">  
        <option value="1">Option 1</option>  
        <option value="2">Option 2</option>  
        <option value="3">Option 3</option>  
    </select>  
    <button id="changeValueButton">Change Default Value</button>  
    <script>  
        var button = document.getElementById('changeValueButton');  
        var selectElement = document.getElementById('mySelect');  
        button.addEventListener('click', function() {  
            selectElement.value = '3';  
        });  
    </script>  
</body>  
</html>