我將創建的下拉菜單從select和option標記更改為Hoverable Dropdown菜單。 我應該如何在其中傳遞值

Question

我想創建一個Hoverable Dropdown來按名稱或日期對結果進行動態排序。 以前，我通過使用和標記創建了一個下拉列表，其中一切正常

我的代碼是：

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

已轉換為“可懸停的下拉菜單”。 但是現在的問題是代碼如何知道我單擊了鏈接並因此傳遞值$ 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>