Is there a way to add custom attributes to the links in a menu?

[dmcgrew]

I was wondering if there is a way to add an attribute to the links within a menu. If so how would I go about doing this?

This is the HTML the plugin creates:

<li role="presentation" class="">
    <a href="#nogo" tabindex="-1" role="option" aria-selected="false">Branding</a>
</li>

I'd like to add an attribute to the a for example:

<li role="presentation" class="">
    <a href="#nogo" tabindex="-1" role="option" aria-selected="false" data-filter="branding">Branding</a>
</li>

[fnagel]

Sorry, there is currently no way to do so. This would be feature request.

If you're using jQuery 1.10 you should give the new, official jQuery UI Selectmenu (not official released yet): #140

[demonslord]

Hi dmcgrew,
you can do it manully:

http://jsfiddle.net/WZANx/

[dmcgrew]

@demonslord thanks for the example. Its very close to what I'm looking for. However, I'd like to pull the option's value attribute into the data-filter attribute. Is that possible?

[fnagel]

Can I ask what you're trying to achieve? Isotope filtering?

[dmcgrew]

Yep! I almost have it working but one thing I've been struggling with is that I have 2 menus for filtering and I need one to reset when I click on the other.

[fnagel]

Something like this I guess: http://www.taxofit.de/produkte.html

[demonslord]

Hi,
Here example: http://jsfiddle.net/sCrYf/

[fnagel]

Just use the change event! Use the change callback and reset the Selectmenus by using the index method.
No need for additional attributes, just add the CSS classes to the option values and pass them via the change callback to Isotope.

[dmcgrew]

Alright, I think I'm really close on this now. Thanks both of you for all your help. Only issue I'm having now is that clicking on a link within the dropdown appears to do nothing. Is there some a preventDefault() on the links in the dropdown that would be effecting this? Here's what I have...

$('ul.ui-selectmenu-menu-dropdown a').click(function(){
console.log("clicked"); //this is not showing up in the console
  //var selector = $(this).attr('data-filter');
  //$container.isotope({ filter: selector });
  //return false;
});

[dmcgrew]

I have it working perfectly now. :) Just need to move that click() function into a jQuery function. All is good. Thank you both for all your help again.

[fnagel]

So this issue could be closed?