title: jQuery filter list using ul li
body: <p>I've got a filter list working using the select dropdown. But because of the lack of styling options, I'd rather switch it to a <code>ul</code> instead. But I'm having trouble doing so.</p>
  
  <p>Here's the jQuery I'm using</p>
  
  <pre><code>$("select.filterby").change(function(){
      var filters = $.map($("select.filterby").toArray(), function(e){
          return $(e).val();
      }).join(".");
      $("div#FilterContainer").find("div").hide();
      $("div#FilterContainer").find("div." + filters).show();
  });
  </code></pre>
  
  <p>I've tried changing select.filter to a regular div class but I can see it's mapping using the value function <code>.val</code> </p>
  
  <p>Ideally, I'd like it to be:</p>
  
  <pre><code>&lt;ul class="filterby"&gt;
      &lt;li class="all"&gt;Show All&lt;/li&gt;
      &lt;li class="one"&gt;One&lt;/li&gt;
      &lt;li class="two"&gt;Two&lt;/li&gt;
      &lt;li class="three"&gt;Three&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>But I can't use a value tag on a <code>li</code>. Did anyone get any suggestions on the best way to solve this?</p>
  
  <p>Here's a working fiddle: <a href="http://jsfiddle.net/6PrQW/329/" rel="nofollow noreferrer">http://jsfiddle.net/6PrQW/329/</a></p>