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

Question

I'm trying to obtain the selected menu item from a ul dropdown list, but I'm not sure how to use PHP or JS to obtain the selected item.

The selected item needs to be submitted to the server-side with PHP. I know how to do it with a menu, but I need to use a ul with li items for my current CSS to work.

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

I expect the ability to pass the selected item i.e. "pizza". How do I solve this problem?

Answer 1

You can use this code snippet

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

You can use an input type hidden field to track the value of selected

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

and change the selected value inside function functionABC

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