不单击按钮即可显示选择框中的数据

要在不点击按钮的情况下显示选择框（<select>元素）中的数据，可以使用JavaScript来自动触发选择框的点击事件或更改其值。以下是实现这一功能的基础概念和相关代码示例：

基础概念

DOM操作：通过JavaScript操作HTML文档对象模型（DOM）来访问和修改页面元素。
事件触发：使用JavaScript模拟用户交互事件，如点击事件。

实现方法

方法一：自动触发点击事件

可以通过JavaScript自动触发选择框的点击事件，使其展开并显示选项。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Auto Show Select Options</title>
<script>
window.onload = function() {
    // 获取选择框元素
    var selectElement = document.getElementById('mySelect');
    
    // 创建并触发点击事件
    var event = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true
    });
    selectElement.dispatchEvent(event);
};
</script>
</head>
<body>
<select id="mySelect" size="5">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>
</body>
</html>

方法二：直接设置选择框的值

可以通过JavaScript直接设置选择框的值，使其显示特定选项。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Auto Show Select Options</title>
<script>
window.onload = function() {
    // 获取选择框元素
    var selectElement = document.getElementById('mySelect');
    
    // 设置选择框的值
    selectElement.value = '3'; // 这将自动选择并显示“Option 3”
};
</script>
</head>
<body>
<select id="mySelect">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>
</body>
</html>