JS下拉框|极客笔记

JS下拉框

在Web开发中，下拉框是一种常见的交互元素，通常用来展示一组选项供用户选择。JavaScript可以帮助我们实现下拉框的功能，包括动态加载选项、获取选中值等操作。本文将详细介绍如何使用JavaScript来创建和操作下拉框。

1. 创建一个简单的下拉框

首先，我们来创建一个简单的下拉框。在HTML中，我们可以使用<select>和<option>标签来创建一个下拉框，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Dropdown</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>
</body>
</html>

在上面的代码中，我们创建了一个包含三个选项的下拉框。每个<option>标签代表一个选项，value属性是选项的值，文本内容即为用户看到的选项名称。下拉框通过<select>标签来定义。

2. 获取选中值

接下来，我们来看看如何使用JavaScript来获取用户选择的值。我们可以通过document.getElementById()方法获取下拉框的DOM元素，然后使用value属性来获取选中的值，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Selected 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 onclick="getValue()">Get Selected Value</button>

    <script>
        function getValue() {
            const select = document.getElementById('mySelect');
            const selectedValue = select.value;
            alert('Selected value: ' + selectedValue);
        }
    </script>
</body>
</html>

在上面的代码中，我们定义了一个按钮，当用户点击按钮时，会调用getValue()函数。该函数首先获取到下拉框的DOM元素，然后通过value属性获取选中的值，并通过alert方法弹出选中的值。

3. 动态加载选项

除了静态地创建选项外，我们还可以通过JavaScript动态地向下拉框中添加选项。下面是一个示例，当用户点击按钮时，会向下拉框中添加一条新的选项：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Dropdown</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 onclick="addOption()">Add Option</button>

    <script>
        function addOption() {
            const select = document.getElementById('mySelect');
            const option = document.createElement('option');
            option.text = 'New Option';
            option.value = '4';
            select.add(option);
        }
    </script>
</body>
</html>

在上面的代码中，我们首先创建了一个下拉框，然后定义了一个按钮，当用户点击按钮时，会调用addOption()函数。该函数通过document.createElement()方法创建一个<option>元素，并设置其文本内容和值，然后通过add()方法将新的选项添加到下拉框中。