jquery 可过滤的组合使用 selectbox 而不是普通的 href

发布于 2024-08-20 22:58:32 字数 693 浏览 6 评论 0 原文

我正在使用新媒体活动的可过滤组合脚本（ http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours ）效果很好在无序列表中使用普通链接时。不过，我想在选择框中提供选项。有人能指出我正确的方向吗？

编辑：我想通过从选择框中选择选项来使用过滤器，如下所示

<select id="someid">
  <option selected value="#All">All</option>            
  <option value="#Design">Design</option>      
  <option value="#Political">Political</option>
  <option value="#Business">Business</option>
</select>

原文

I'm using the filterable portfolio script by new media campaigns ( http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours ) which works fine when using normal links in a unordered list. I would like to offer the options in a selectbox though. Could anyone point me in the right direction?

edit: I'd like to use the filter by selecting options from a selectbox like so

<select id="someid">
  <option selected value="#All">All</option>            
  <option value="#Design">Design</option>      
  <option value="#Political">Political</option>
  <option value="#Business">Business</option>
</select>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只等公子 2024-08-27 22:58:32

您的 select 上确实有一个 change 事件。在此处理程序中，您需要调用与单击链接相同的例程！

但是：引发 change 事件取决于浏览器。有人可能会立即调用它，其他人可能会在你模糊时调用它！

将这个想法与可过滤文档：

$(document).ready(function(){
 $('portfolio-list').filterable();
 $('#linkID').click(function(){
  $('portfolio-list').trigger('filter', [ '#jquery' ]);
 });
});

例如

var myFilterable = $('#myFilterable').filterable();
var mySelect = $('#mySelect');
mySelect.change(function() {
    var index = mySelect[0].selectedIndex;
    var element = mySelect[0].options[index];
    var tag = $(element).attr('value'); // jQuery variant
    //var tag = element.value; // html variant
    //var tag = $(element).val(); // should work either!
    // TODO: create an array with the variable value
    myFilterable.trigger('filter', /* array of tag(s) you want to show*/);
});

you do have a change-event on your select. in this handler you need to call the same routine as clicking on the link would!

but: raising change-event is browser-depended. one may call it immediately, others when you blur!

combine the idea with filterable docu:

$(document).ready(function(){
 $('portfolio-list').filterable();
 $('#linkID').click(function(){
  $('portfolio-list').trigger('filter', [ '#jquery' ]);
 });
});

var myFilterable = $('#myFilterable').filterable();
var mySelect = $('#mySelect');
mySelect.change(function() {
    var index = mySelect[0].selectedIndex;
    var element = mySelect[0].options[index];
    var tag = $(element).attr('value'); // jQuery variant
    //var tag = element.value; // html variant
    //var tag = $(element).val(); // should work either!
    // TODO: create an array with the variable value
    myFilterable.trigger('filter', /* array of tag(s) you want to show*/);
});

回复收藏 0 原文

~没有更多了~