PHP/HTML：创建子菜单

Question

我的程序有这个过滤功能。它是以下拉列表的形式。我目前使用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(); 
    } 

Answer 1

在上空盘旋option元素从MDN本说明可能会感兴趣的问题。

[2]从历史上看，Firefox允许键盘和鼠标事件从元素向上滚动到父元素。 然而，这在Chrome中没有发生，尽管在许多浏览器中这种行为是 不一致。为了更好地实现Web兼容性（出于技术原因，需要 ），Firefox处于多进程模式时， 元素显示为下拉列表。 行为是 不变，如果内联列出并且它具有定义的多个属性 或大小属性设置为大于1。 而不是观察事件的元素，您应该观看 {event（“change”）} }事件

我试验了嵌套选择 - 不起作用。在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>