PHP / HTML: создание подменю
У меня есть эта функция фильтрации в моей программе. Это в форме выпадающего списка. В настоящее время я использую метод 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 этого не происходит, хотя такое поведение
несовместим во многих браузерах. Для лучшей веб-совместимости (и
по техническим причинам), когда 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>
Другие решения
Других решений пока нет …