[英]I have changed dropdown menu created from select and option tag to a Hoverable Dropdown menu. How should i pass values in it
I want to create a Hoverable Dropdown to sort my results by name or date dynamically. 我想创建一个Hoverable Dropdown来按名称或日期对结果进行动态排序。 Previously i had a dropdown created by using and tag in which everything was working fine
以前,我通过使用和标记创建了一个下拉列表,其中一切正常
My code was: 我的代码是:
<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>
which i have changed to 我已更改为
<div class="sort">
<ul>
<li><a href="#">name</a></li>
<li><a href="#">date</a></li>
</ul>
</div>
which has converted to a Hoverable Dropdown. 已转换为“可悬停的下拉菜单”。 But now the problem is how would the code know that i have clicked on a link and hence pass a value $orderby which i am fetching on another page by using if(isset($_POST[order_by])) to use in a sql query ?
但是现在的问题是代码如何知道我单击了链接并因此传递值$ orderby,我通过使用if(isset($ _ POST [order_by]))在SQL查询中使用来获取另一页?
You can use JavaScript
or jQuery
to achieve that. 您可以使用
JavaScript
或jQuery
来实现。 First you create a hidden input field 首先,您创建一个隐藏的输入字段
<input type="hidden" id="order_by" name="order_by" value="" />
Then you use jQuery
to update the value
of the input
field when the user clicks any option like this 然后,当用户单击任何这样的选项时,使用
jQuery
更新input
字段的value
$('ul li a').click(function(){
newValue = $(this).html();
$('input#order_by').val(newValue);
});
Note: Don't forget to include the jQuery
library to your script. 注意:不要忘记在脚本中包含
jQuery
库。 And also remember that your input field have to be within the form
tag that you are submitting. 还要记住,您的输入字段必须在您提交的
form
标记内。
Sorry @kanayo, but this isn't working or maybe i am not keeping it in correct way. 抱歉,@ kanayo,但这无法正常工作,或者我可能没有采用正确的方式。 Is this the right way to keep it
这是保持它的正确方法吗
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.