首页帮我写一个耳机联动页面，是一个小画面，选择的内容会在画面上展示出来

帮我写一个耳机联动页面，是一个小画面，选择的内容会在画面上展示出来

时间: 2024-04-17 16:27:27 浏览: 49

当然可以帮你写一个耳机联动页面。以下是一个简单的示例代码，你可以根据你的需求进行修改和扩展： ```html <!DOCTYPE html> <html> <head> <title>耳机联动页面</title> <style> .selected-items { display: flex; flex-wrap: wrap; } .selected-item { background-color: lightgray; border-radius: 5px; padding: 5px; margin-right: 5px; margin-bottom: 5px; } </style> </head> <body> <h1>耳机联动页面</h1> <h2>选择耳机：</h2> <select id="headphones-select"> <option value="">请选择耳机</option> <option value="1">耳机1</option> <option value="2">耳机2</option> <option value="3">耳机3</option> </select> <h2>已选中的耳机：</h2> <div class="selected-items" id="selected-items"></div> <script> const headphonesSelect = document.getElementById('headphones-select'); const selectedItems = document.getElementById('selected-items'); headphonesSelect.addEventListener('change', function() { const selectedOption = this.options[this.selectedIndex]; if (selectedOption.value) { const selectedItem = document.createElement('div'); selectedItem.classList.add('selected-item'); selectedItem.textContent = selectedOption.text; selectedItems.appendChild(selectedItem); } }); </script> </body> </html> ``` 这段代码创建了一个选择耳机的下拉菜单，并且在下方展示已选中的耳机。每当选择一个耳机，它会被添加到已选中的耳机列表中。你可以根据需要自定义样式，添加更多的选项，或者在选择耳机后展示更多相关信息。希望这个示例对你有帮助！如果有任何问题，请随时提问。

阅读全文