Question

我有一个简单的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>

请参阅Fiddle

上的工作示例

我希望将过滤系统从我的<a>标签更改为RWD SELECT标签的更高效的空间保护程序，并在选择<option>时显示/隐藏html元素（改变事件??）。

不知道是否可以使用最小标记+ js，或者我是否需要基于<form>和AJAX的解决方案来执行此操作。（基于期权价值？可能在变更事件上？）

任何线索？尝试了一些，但我不在JS上:(非常感谢你的帮助。

P.S由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>

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

0 个答案: