Question

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

所选项目需要使用PHP提交到服务器端。我知道如何通过菜单执行此操作，但是我需要将ul和li项一起使用才能使当前的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;

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

1 个答案: