写一个select下拉分组的组件

以下是一个简单的示例，展示如何使用HTML、CSS和JavaScript来创建一个带有分组功能的下拉选择（select）组件。我们将使用原生的HTML optgroup 元素来实现分组。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉分组组件</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="dropdown-container">
        <label for="grouped-select">选择一个选项:</label>
        <select id="grouped-select" onchange="handleSelectChange(event)">
            <optgroup label="水果">
                <option value="apple">苹果</option>
                <option value="banana">香蕉</option>
                <option value="orange">橙子</option>
            </optgroup>
            <optgroup label="动物">
                <option value="dog">狗</option>
                <option value="cat">猫</option>
                <option value="elephant">大象</option>
            </optgroup>
        </select>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
}

.dropdown-container {
    margin: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

select {
    width: 200px;
    padding: 5px;
    font-size: 16px;
}

JavaScript (script.js)

function handleSelectChange(event) {
    const selectedOption = event.target.value;
    console.log(`选定的选项是: ${selectedOption}`);
}

这个示例中，我们创建了一个带有两个分组（“水果”和“动物”）的下拉选择组件。每个分组包含几个选项。当用户选择一个选项时，JavaScript函数handleSelectChange会被调用，并在控制台中打印出选定的选项。你可以根据需要修改这个函数，以便在用户选择选项时执行其他操作。

posted @ 2024-12-18 10:59  王铁柱6  阅读(36)  评论(0)    收藏  举报