Sub menu in option tag - html

Question

The application I develop needs a submenu in the option tag. If a user clicks on one of the options from the submenu, it shows up in the search bar to be searched. However, I am not being able to do so.
This is the code:
<div class="form-row">
<select class="form-control mx-sm-3"">
<option selected="selected">Variant</option>
<option>Protein Variant</option>
<option>Copy Number Alterations</option>
<ul class="nav navbar-nav">
<li class="dropdown">
<option href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></option>
<ul class="dropdown-menu">
<option>Service A</option>
<option>Service B</option>
<option>Service C</option>
</ul>
</li>
</ul>
</select>
</div>
Ideally, if the user hovers over 'service' there should be a new box with options 'Service A', 'Service B', 'Service C'

Answer 1

HTML way only offer optgroup
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
if you want a more specific dropdown, you need to implement it with javascript, like:
$(document).ready(function() {
$('.dropdown-submenu a').on("click", function(e) {
$(this).parents('ul').find('.dropdown-submenu ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
All South Africa
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Variant</a>
<a class="dropdown-item" href="#">Protein Variant</a>
<a class="dropdown-item" href="#">Copy Number Alterations</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Service A</a></li>
<li><a class="dropdown-item" href="#">Service B</a></li>
<li><a class="dropdown-item" href="#">Service C</a></li>
</ul>
</li>
</ul>
</div>