我们如何将从子下拉菜单中选择的值显示到下拉列表的顶部。是否可以使用javascript。我的html代码是
如果我们从任何子下拉列表中选择任何课程，它将显示在下拉列表的顶部位置。是否可以。请帮助我。
<div class="dropdown">
<p>
<h5>Departments</h5>
</p>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" style="margin-left:0px;padding-left:0px;">Select
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">MCA</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">B.Tech <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Courses</a></li>
<li><a tabindex="-1" href="#">EEE</a></li>
<li><a tabindex="-1" href="#">Civil</a></li>
<li><a tabindex="-1" href="#">Mechanical</a></li>
<li><a tabindex="-1" href="#">Computer science</a></li>
<li><a tabindex="-1" href="#">Aeronautics</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">M.Tech <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Courses</a></li>
<li><a tabindex="-1" href="#">IC Technology</a></li>
<li><a tabindex="-1" href="#">Civil</a></li>
<li><a tabindex="-1" href="#">DataScience</a></li>
<li><a tabindex="-1" href="#">Computer science</a></li>
<li><a tabindex="-1" href="#">Environmental Engineering</a></li>
</ul>
</li>
</ul>
</div>
</div>检查下面的示例。
const dropdown = document.getElementById('dropdown');
const subDropdowns = document.querySelectorAll('optgroup');
subDropdowns.forEach((optgroup) => {
optgroup.addEventListener('click', (event) => {
const selectedValue = event.target.value;
dropdown.value = selectedValue;
dropdown.insertBefore(dropdown.querySelector(`[value="${selectedValue}"]`), dropdown.firstElementChild);
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Selection</title>
<style>
/* Your CSS styles here */
</style>
</head>
<body>
<select id="dropdown">
<option>Select</option>
<option value="MCA">MCA</option>
<optgroup label="B.Tech">
<option value="Courses">Courses</option>
<option value="EEE">EEE</option>
<option value="Civil">Civil</option>
<option value="Mechanical">Mechanical</option>
<option value="ComputerScience">Computer science</option>
<option value="Aeronautics">Aeronautics</option>
</optgroup>
<optgroup label="M.Tech">
<option value="Courses">Courses</option>
<option value="ICTechnology">IC Technology</option>
<option value="Civil">Civil</option>
<option value="DataScience">DataScience</option>
<option value="ComputerScience">Computer science</option>
<option value="EnvironmentalEngineering">Environmental Engineering</option>
</optgroup>
</select>
</body>
</html>