PHP/HTML : Creating A 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] Historically, Firefox has allowed keyboard and mouse events to bubble up from the element to the parent element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the element is displayed as a drop-down list. The behavior is unchanged if the is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching elements for events, you should watch for {event("change")}} events on

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