Jquery 使用select html标记+javascript作为过滤器

我有一个简单的html+jquery结构来显示/隐藏html元素

<ul>
  <li><a href="#" name="showall">Show All</a></li>
  <li><a href="#" name="showblue">Show Blue</a></li>
  <li><a href="#" name="showred">Show Red</a></li>
</ul>

<ul class="filters">
  <li class="blue">Blue</li>
  <li class="red">Red</li>
  <li class="red blue">Red and Blue</li>
</ul>

<script>
  $("a[name='showall']").click(function(e){
    e.preventDefault();
    $(".filters li").show();
  });
  $("a[name='showblue']").click(function(e){
    e.preventDefault(); 
    $(".filters li:not(.blue)").hide();
    $(".filters li.blue").show();
  });
  $("a[name='showred']").click(function(e){
    e.preventDefault(); 
    $(".filters li:not(.red)").hide();
    $(".filters li.red").show();
  });
</script>

---

那么你想要一个下拉式过滤器？是的，这就是想法。像这样？是的，这正是我想要的，标记最少。谢谢你，@BeNdErR

<select id="mySelect">
  <option value="all">Show All</option>
  <option value="blue">Show Blue</option>
  <option value="red">Show Red</option>
</select>
<script>
  $("#mySelect").on("change", function(){
  var value = $(this).val();
  console.log(value);
  if(value != "all"){
    $(".filters li:not(." + value + ")").hide();
    $(".filters li." + value ).show();
    return;
  }
  $(".filters li").show();
  });
</script>