jquery filterable portfolio using selectbox instead of normal href
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 wo开发者_开发技巧uld 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>
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' ]);
});
});
eg
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*/);
});
精彩评论