PHP/HTML: Создание SubMenu

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 есть sometrickery, чтобы сделать это ...

Как в сторону, небольшой эксперимент - не совсем то, что вы пытались сделать, но близко.

<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>