我的程序中有这个过滤功能。它采用下拉列表的形式。我当前正在使用Select Option方法在下拉列表中显示选项。然而，如果列表很长，看起来就不太好了，所以我想做的是创建一个子菜单。例如，我有20个选项。我想要的是将其转换为5个选项，每个选项都有子选项或子选项。
这是我最初所做的，可能是一个很好的案例。因此，与其在主选项下显示3个购物中心，我想做一个名为"按购物中心过滤"的母选项，然后再做"按位置过滤"，而不是在主选项上显示所有位置，等等。
<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>
以下是我将案例放在PHP脚本下的部分。
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();
}
关于悬停在option元素上的问题，MDN的这条注释可能会引起兴趣。
[2] 从历史上看，Firefox允许键盘和鼠标事件从元素向上冒泡到父元素。然而，在Chrome中不会发生这种情况，尽管这种行为在许多浏览器中不一致。为了更好的Web兼容性（以及由于技术原因），当Firefox处于多进程模式并且元素显示为下拉列表。行为是如果以内联方式显示并且具有定义了多个属性或将大小属性设置为大于1。与其看事件的元素，不如看对于上的｛event（"更改"）｝｝个事件
我尝试了嵌套选择——不起作用。侦听option元素上的事件也不起作用（至少在Chrome中不起作用，这是我现在使用最多的东西，因此请注意上面的内容），所以您可能能够监视父级（select）上的事件并以这种方式完成您想要的事件-毫无疑问，jQuery中有一些技巧可以做到这一点。。。
顺便说一句，一个小实验——不完全是你想做的，但结束了。
<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>