制作 ul li 下拉筛选器

Question

我有一个下拉菜单，现在想将其用作过滤器。当我点击菜单项时传递一个值来开始过滤，但我对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>

- user10828115

---

你需要使用 <select><option></option></select> 来提交数据，而不是使用 <ul>。 - yip102011

你想用 Ajax 提交数据吗？ - yip102011

选择值时单击。并通过提交筛选数据。因为我有多个下拉菜单。所以我尝试一次选择多个值并搜索。当然，如果可能的话，我希望直接单击搜索，但那时候。下一个搜索将重新开始...我希望在单击下一个筛选器时保留旧的筛选数据... - user10828115

仍然存在HTML上的错误...在li上..data-value = "red"...缺少等号。 - Merak Marey

让我们在聊天中继续这个讨论。 - user10828115

Answer 1

不确定这是否符合您的要求，但您可以尝试以下代码并告诉我您的想法：

最初的回答：

var mockData = [
    {
        make: 'a',
        color: 'red',
        price: 1000
    },
    {
        make: 'a',
        color: 'black',
        price: 2000
    },
    {
        make: 'b',
        color: 'red',
        price: 1
    },
    {
        make: 'a',
        color: 'silver',
        price: 3000
    },
    {
        make: 'c',
        color: 'black',
        price: 1500
    },
    {
        make: 'a',
        color: 'red',
        price: 1500
    }
];

var allOptions = $('.init').children('li');
// use an object to store the filter options selected by the user
// you can then use the information in this object to do the filtering
// by sending an AJAX request or just filter the already fetched data
var filterOptions = {
    sortbycolor: '',
    sortbymake: '',
    sortbyprice: ''
};

$(allOptions).on('click', function () {
    // get the items' data-value
    var value = $(this)[0].dataset.value;
    // select the corresponding <a> tag
    var button = $(this).parent()[0].previousElementSibling;
    // get the corresponding name attribute, e.g. sortbycolor
    var type = $($(this).parent()[0]).attr('name');

    // set the filterOptions
    filterOptions[type] = value;

    // change the displayed text of the filter when the user select something
    $(button).text(function (idx, content) {
        // here I choose using a colon ':' as the separator,
        // you can use whatever you want
        var colonIndex = content.indexOf(':');
        // example for baseContent is 'Car Color'
        var baseContent = content;

        if (colonIndex > -1) {
            baseContent = content.slice(0, colonIndex);
        }

        // e.g 'Car Color: red
        return baseContent + ': ' + value;
    });

    allOptions.slideUp();
    console.log('update filterOptions: ', filterOptions);

    // filter the already fetched data
    var filteredData = mockData.filter(function (val) {
        var isValid = true;

        if (isValid && filterOptions.sortbycolor) {
            isValid = val.color === filterOptions.sortbycolor;
        }

        if (isValid && filterOptions.sortbymake) {
            isValid = val.make === filterOptions.sortbymake;
        }

        return isValid;
    });

    // sort the data by price
    // hard-code the sorting direction here for simplicity,
    // you can set this dynamically with the onclick event
    filterOptions.sortbyprice = 'asc';

    if (filterOptions.sortbyprice === 'asc') {
        filteredData.sort(function (a, b) {
            return a.price - b.price;
        });
    } else if (filterOptions.sortbyprice === 'desc') {
        filteredData.sort(function (a, b) {
            return b.price - a.price;
        });
    }

    console.log('filteredData: ', filteredData);

    // or you can send an ajax request to the server,
    // and let the server handle the filtering for you
    
    // you have to set the keys and values inside
    // the 'data' youself, below is just an example
    // as I don't know what your server's API looks like
    $.get({
        url: 'url-to-your-server',
        data: {
            color: filterOptions.sortbycolor,
            make: filterOptions.sortbymake
        },
        success: function (response) {
            // do something with the response,
            // maybe it contains the filtered result
            // however, I am not sure how does your API look like
        }
    });
});

// to deal with the left over css style(display: none) introduced by .slideUp()
$('.dropdown').on('mouseenter', function () {
    allOptions.css('display', 'block');
});

console.log('initial filterOptions: ', filterOptions);

#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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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 class="dropdown">
            <a href="#" id="car-color">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>

        <li class="dropdown">
            <a href="#" id="make">Make</a>
            <ul class="init" name="sortbymake">
                <li data-value="a"><a href="#">A</a></li>
                <li data-value="b"><a href="#">B</a></li>
                <li data-value="c"><a href="#">C</a></li>
            </ul>
        </li>
    </ul>
</div>

- Ray Chan

---

感谢您的努力，几乎符合我的要求。实际上下拉菜单是可以工作的。但是过滤不起作用。我不知道为什么。当我传递名称和值时，但是当我点击它时，它没有过滤。实际上，我已经使用我的旧selectBox更新了上面的代码。您能否请检查一下？ - user10828115

还有一件事，当我尝试使用链接而不是Ajax进行筛选时（因为它不起作用），它无法保留第一个筛选历史记录。下一次点击会重新开始...例如，我筛选价格，然后我筛选颜色。它会忘记按价格排序...等等。 - user10828115

实际上，我一开始没有链接/网址。<a>标签只包含“#”，但是当我点击li时，它不会进行筛选...我在问题中发布了我的早期selectBox。你可以检查一下。例如，在数据库中，我有一个“cars”列。每行都有一个像“red”，“blue”这样的项目，因此我正在使用该列获取这些行。在Laravel控制器中，名称为列名=“cars”，值为行中的项目...它与selectBox一起工作...但我不想使用selectBox，而是尝试使用ul``li来完成。 - user10828115

抱歉回复晚了。我不熟悉Laravel框架，我猜在你的旧样式selectBox中，当用户点击提交按钮时，你执行过滤操作，并等待服务器响应筛选后的数据？对于ul li版本，你可以添加一个提交按钮，它的工作方式与旧的selectBox相同。或者你可以在onClick函数中添加一个ajax调用，例如，在console.log('update filterOptions: ', filterOptions);这行代码之前。 - Ray Chan

让我们在聊天中继续这个讨论。 - user10828115

Answer 2

我删除了你的CSS，你只对颜色值感兴趣-是吗？

<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><a href="#" data-value="red">Red</a></li>
                <li><a href="#" data-value="black">Black</a></li>
                <li><a href="#" data-value="silver">Silver</a></li>
            </ul>
        </li>
    </ul>
</div>

<script>
    var allOptions = $(".init").children('li');

    // I think you are only interested in the html content of the a (anchor)

    $("li[data-value] > a").on("click", function(e) {
        e.preventDefault();

        allOptions.removeClass('selected');
        $(this).addClass('selected');

        let filterVal = $(this).data('value'); // do something with this ...
        let li = $('<li />').html( filterVal);
        $("ul.init").html('').append( li); // ul.init just has the value of the filter

        // allOptions.slideUp(); // superfluos
    });
</script>

- David Bray