我已将从 select 和选项标签创建的下拉菜单更改为可悬停下拉菜单。我应该如何在其中传递值

Question

我想创建一个可悬停的下拉菜单来按名称或日期对结果进行动态排序。以前我有一个通过使用和标记创建的下拉列表，其中一切正常

我的代码是：

<select name="sort-by" id="sort">
      <option value="name" <?php if($orderby == 'name') echo "selected='selected'";?>>name</option>
      <option value="date" <?php if($orderby == 'date') echo "selected='selected'";?>>date</option>
    </select>

我已更改为

    <div class="sort">
    <ul>
    <li><a href="#">name</a></li>
    <li><a href="#">date</a></li>
    </ul>
    </div>

已转换为悬停下拉菜单。但现在的问题是代码如何知道我点击了 link 并因此传递了一个值 $orderby 我正在通过使用 if(isset($_POST[order_by] 在另一个页面上获取它)) 在 sql 查询中使用 ?

Answer 1

您可以使用 JavaScript 或 jQuery 来实现。首先你创建一个隐藏的输入字段

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

然后您使用 jQuery 来更新 input 字段的 value 当用户点击这样的任何选项时

$('ul li a').click(function(){
    newValue = $(this).html();
    $('input#order_by').val(newValue);
});

注意：不要忘记将 jQuery 库包含到您的脚本中。还要记住，您的输入字段必须在您提交的 form 标签内。

这里有一个jsFiddle来显示结果

Answer 2

抱歉@kanayo，但这不起作用，或者我没有以正确的方式保存它。这是保持它的正确方法吗

    <div class="sort">
    <script>
    $('ul li a').click(function(){
    newValue = $(this).html();
    $('input#order_by').val(newValue);
    });
    </script>
    </div>
    <ul>
    <input type="hidden" id="order_by" name="order_by" value=""/>
    <li><a href="#" >Name</a></li>
    <li><a href="#" >Date</a></li>
    </ul>
    </div>

我已将从 select 和选项标签创建的下拉菜单更改为可悬停下拉菜单。我应该如何在其中传递值

I have changed dropdown menu created from select and option tag to a Hoverable Dropdown menu. How should i pass values in it

html

php

dropdown