title: Making ul li dropdown filter
body: <p>I have a dropdown menu, now trying to use it as a filter. pass a value when I click the menu item start filtering But I am a bit confused at Jquery part. How to pass "name" &amp; "value" and start filtering. And the important issue is when I click one item and filter. After that when I click next item, I don't want it to start over. I want to keep old history of search. and add it to new filter.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var allOptions = $(".init").children('li');
    $("ul").on("click", function() {
        allOptions.removeClass('selected');
        $(this).addClass('selected');
        $("ul").children('.init').html($(this).html());
        allOptions.slideUp();
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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 &gt; ul
  {
   display:block
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
  
  &lt;div id="filter-wrapper"&gt;
    &lt;ul&gt;
      &lt;li name="sortbyprice" class="current-menu-item"&gt;&lt;a href="#"&gt;Cheapest Cars&lt;/a&gt;&lt;/li&gt;
      &lt;li name="sortbyprice" class="current-menu-item"&gt;&lt;a href="#"&gt;Newest Cars&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;Car Color&lt;/a&gt;
        &lt;ul class="init" name="sortbycolor"&gt;
          &lt;li data-value="red"&gt;&lt;a href="#"&gt;Red&lt;/a&gt;&lt;/li&gt;
          &lt;li data-value="black"&gt;&lt;a href="#"&gt;Black&lt;/a&gt;&lt;/li&gt;
          &lt;li data-value="silver"&gt;&lt;a href="#"&gt;Silver&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>For example, when I select Red then Car Color changed with the Red.</p>
  
  <p>P.S: And by the way the <code>name=""</code> that I gave, it comes from Laravel controller. It contains the data. </p>
  
  <p>And this is the old filter of mine. It's working with this. I can filter the data. </p>
  
  <pre><code>   &lt;form&gt;
       &lt;select name="sortbyprice" class="custom-select custom-select-md" style="width: 100px;"&gt;
         &lt;option value="asc"&gt;cheapest&lt;/option&gt;
         &lt;option value="desc"&gt;Expensive&lt;/option&gt;
       &lt;/select&gt;
       &lt;select id="cars" name="cars" class="custom-select custom-select-md" style="width: 100px;"&gt;
        &lt;option value="" disabled selected&gt;car colors&lt;/option&gt;
        &lt;option value="red"&gt;red&lt;/option&gt;
        &lt;option value="blue"&gt;blue&lt;/option&gt;
        &lt;option value="black"&gt;black&lt;/option&gt;
      &lt;/select&gt;
      &lt;button type="submit" name="button" class="btn btn-success" id="filter-btn"&gt;Filter&lt;/button&gt;
    &lt;/form&gt;
  </code></pre>