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>