如何从html下拉菜单中获取/传递所选项目？

Question

我正在尝试从ul下拉列表中获取所选菜单项，但我不确定如何使用PHP或JS来获取所选项。

所选项目需要使用PHP提交给服务器端。 我知道如何使用菜单，但我需要使用带有li项目的ul来为我当前的CSS工作。

<div class="TypeListBox">
    <div id="dd" class="wrapper-dropdown-3" tabindex="1">
        <span>Food</span>
            <ul class="dropdown">
                <li><a href="#"><i class="fas fa-pizza-slice"></i></i>Pizza</a></li>
                <li><a href="#"><i class="fas fa-pepper-hot"></i></i>Mexican</a></li>
                <li><a href="#"><i class="fas fa-hamburger"></i></i>Burgers</a></li>

            </ul>
    </div>
</div>

我希望能够传递所选项目，即“披萨”。 我该如何解决这个问题？

Answer 1

您可以使用此代码段

 <div class="TypeListBox">
   <div id="dd" class="wrapper-dropdown-3" tabindex="1">
    <span>Food</span>
        <ul class="dropdown">
            <li><a href="javascript:void(0);" onclick="functionABC('Pizza')"><i class="fas fa-pizza-slice"></i></i>Pizza</a></li>
            <li><a href="javascript:void(0);" onclick="functionABC('Mexican')"><i class="fas fa-pepper-hot"></i></i>Mexican</a></li>
            <li><a href="javascript:void(0);" onclick="functionABC('Burgers')"><i class="fas fa-hamburger"></i></i>Burgers</a></li>
        </ul>
   </div>
</div>
<script type="text/javascript">
     function functionABC(selectedElement){
        alert(selectedElement);
    }
</script>

您可以使用输入类型hidden字段来跟踪所选的值

<input type="hidden" name="selected" id="selected" value="" />

并更改函数functionABC的选定值

document.getElementById("selected").value = selectedElement;