PHP/HTML: Creating A SubMenu - php

Question

I have this filtering feature on my program. It is in the form of a drop-down list. I'm currently using the Select-Option method to display the options on my dropdown list. However, it doesn't look good if the list is very long so what I would want to do is create a submenu. For example, I have 20 options. What I want is to transform it into 5 options with each option also having children or sub-options.
Here's what I did originally and could be a good case. So instead of displaying the 3 malls under the main options, I would want to make a mother option called "Filter by Mall" then later on, "Filter by Location" instead of displaying all locations on the main option, etc.
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="GET">
<select name="formStats">
<option value="Rob">Robinson's Manila Stores</option>
<option value="MoA">Mall of Asia Stores</option>
<option value="GG">Greenbelt/Glorietta Stores</option>
<input type="submit" name="formSubmit" value="Submit"/>
</form>
Here's the part where I put the cases under my PHP script.
if(isset($_GET['formSubmit']))
{
$varStats = $_GET['formStats'];
$errorMessage = "";
switch($varStats)
{
case "Rob": $show = "Mall = 'Robinson\'s Manila'"; break;
case "MoA": $show = "Mall = 'Mall of Asia;"; break;
case "GG": $show = "Mall = 'Glorietta/Greenbelt'"; break;
}
$conn = db_connect();
showStore($conn, $show);
db_disconnect($conn);
exit();
}

Answer 1

On the issue of hovering over the option element this note from MDN might be of interest.
[2] Historically, Firefox has allowed keyboard and mouse events to
bubble up from the element to the parent element.
This doesn't happen in Chrome, however, although this behavior is
inconsistent across many browsers. For better Web compatibility (and
for technical reasons), when Firefox is in multi-process mode and the
element is displayed as a drop-down list. The behavior is
unchanged if the is presented inline and it has either the
multiple attribute defined or a size attribute set to more than 1.
Rather than watching elements for events, you should watch
for {event("change")}} events on
I experimented with nested selects - doesn't work. Listening for events on the option element also did not work ( at least not in Chrome which is what I use most these days, hence note above ) so you MIGHT be able to monitor events on the parent (select) and accomplish what you want that way - no doubt there is sometrickery available in jQuery to do this...
As an aside, a little experiment - not exactly what you were trying to do but close.
<select id='depsel'>
<option data-menu=1>1st Example
<option data-menu=2>2nd Example
<option data-menu=3>3rd Example
</select>
<span id='subopt' style='display:none;border:1px solid black;width:100px;min-height:200px;'></span>
<script>
var menu=document.getElementById('depsel');
var span=document.getElementById('subopt');
menu.addEventListener('change',function(e){
var selected=this.options[this.options.selectedIndex].dataset.menu;
span.style.display='block';
span.innerHTML='';
var div=document.createElement('div');
div.innerHTML=this.value;
div.onclick=function(evt){
span.style.display='none';
}
span.appendChild( div );
}.bind( menu ),false );
</script>