我有一个下拉菜单,现在想将其用作过滤器。当我点击菜单项时传递一个值来开始过滤,但我对Jquery部分有点困惑。如何传递“名称”和“值”并开始过滤。重要的问题是,当我点击一个项目并进行过滤后,当我点击下一个项目时,我不希望它重新开始。我想保留旧的搜索历史记录,并将其添加到新的过滤器中。
var allOptions = $(".init").children('li');
$("ul").on("click", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$("ul").children('.init').html($(this).html());
allOptions.slideUp();
});
#filter-wrapper
{
margin-top:15px
}
#filter-wrapper ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#filter-wrapper ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#filter-wrapper ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#filter-wrapper ul li.current-menu-item
{
background:#ddd
}
#filter-wrapper ul li:hover
{
background:#f6f6f6
}
#filter-wrapper ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#filter-wrapper ul ul li
{
float:none;
width:200px
}
#filter-wrapper ul ul a
{
line-height:120%;
padding:10px 15px
}
#filter-wrapper ul ul ul
{
top:0;
left:100%
}
#filter-wrapper ul li:hover > ul
{
display:block
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id="filter-wrapper">
<ul>
<li name="sortbyprice" class="current-menu-item"><a href="#">Cheapest Cars</a></li>
<li name="sortbyprice" class="current-menu-item"><a href="#">Newest Cars</a></li>
<li><a href="#">Car Color</a>
<ul class="init" name="sortbycolor">
<li data-value="red"><a href="#">Red</a></li>
<li data-value="black"><a href="#">Black</a></li>
<li data-value="silver"><a href="#">Silver</a></li>
</ul>
</li>
</ul>
</div>
附注:顺便说一下,我给出的“name =”来自Laravel控制器。它包含数据。
这是我的旧过滤器。它可以与此一起使用。我可以过滤数据。
<form>
<select name="sortbyprice" class="custom-select custom-select-md" style="width: 100px;">
<option value="asc">cheapest</option>
<option value="desc">Expensive</option>
</select>
<select id="cars" name="cars" class="custom-select custom-select-md" style="width: 100px;">
<option value="" disabled selected>car colors</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="black">black</option>
</select>
<button type="submit" name="button" class="btn btn-success" id="filter-btn">Filter</button>
</form>
<select><option></option></select>
来提交数据,而不是使用<ul>
。 - yip102011