O'Reilly

Create a Custom “:selected” Pseudo Selector in MooTools

By on  

A while back I read a very interesting article by MooTools core developer Jan Kassens about how to create a custom pseudo selector in MooTools. I was surprised at the ease in which one can add their own pseudo selector that I thought I'd add a pseudo selector that I found useful in jQuery: :selected. This pseudo selector would return option elements that are selected. Here's how I did it:

The XHTML

<select name="mysel" id="mysel" multiple="multiple">
	<option value="One">One</a>
	<option value="Two">Two</a>
	<option value="Three" selected="selected">Three</a>
	<option value="Four" selected="selected">Four</a>
</select>

A basic select element that allows for multiple selections and has two elements selected by default.

The MooTools Custom Pseudo Selector

	Selectors.Pseudo.selected = function(){
		return (this.selected && 'option' == this.get('tag'));
	};

MooTools has an internal "Selectors.Pseudo" variable so all I needed to do was add a selected property. That property is a function that returns whether an individual returned elements should be added to the collection. In this case, if the element has the selected property as true, the element should be returned. Using my example above, the 2 matching elements will be returned.

What other pseudo selectors do you think would be useful in MooTools? Please share!

Track.js Error Reporting

Recent Features

  • Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?...

  • Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • jQuery Chosen Plugin

    Without a doubt, my least favorite form element is the SELECT element.  The element is almost unstylable, looks different across platforms, has had inconsistent value access, and disaster that is the result of multiple=true is, well, a disaster.  Needless to say, whenever a developer goes...

  • Create a Context Menu with Dojo and Dijit

    Context menus, used in the right type of web application, can be invaluable.  They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available.  Dojo's Dijit frameworks provides an easy way to create stylish, flexible context...

Discussion

  1. Evan

    Interesting. I can defiantly see using this one.

    What would happen if I tried to use that pseudo selector on an element that is not a select? Do you think it would be a good idea to wrap it in an if statement? Also could we return the selected element with the MooTools element extensions already applied?

    if(this.get('tag') == 'select'){
         return $(this.selected);
    }
    
  2. @Evan: Per your comment:

    1. Good question, didn’t try that.
    2. Good idea.
    3. I don’t believe you need to do that.
  3. @Even: Actually, let me reconsider my response:

    There should be a check to make sure it’s a “select” element. I’ll add that and test when I get a free moment. Your “return $()” is wrong though. All that needs to be returned within the pseudos is a “true” or “false” value. Essentially, is the condition a match or no?

  4. @Evan: One more update. You want to make sure the tag is an “option” tag, not a “select” tag.

  5. Grammar Nazi

    Interesting. I can defiantly see using this one.

    The word is definitely… Why do so many people have trouble spelling this word?

  6. Evan

    @Grammar Nazi… I noticed the stupid spelling mistake right after I posted and could not go back to edit…

    @david Thanks for testing out my questions for me.

  7. really nice one, it look good

  8. MooTools has functionality built in to get selected elements:

    http://mootools.net/docs/Element/Element#Element:getSelected

  9. @atom: Yep, I guess I find “:selected” to be shorter and within the $$() functionality.

  10. This is one of the neatest tricks I’ve seen in a while. I can already think of two situations where I’d use this right away! Keep up the good work Mister Walsh.

    Oh, and when I read that someone would “defiantly” use this, I just figured they were being rebellious, audacious, insubordinate … mutinous. Using this technique with recalcitrant disobedience.

    “Definitely” is spelled right, but much less interesting.

  11. Ha, nice script, in my current style of programming I don’t use it, but defiantly will later on!

    Sorry Grammar, couldn’t resist :)

  12. If MooTools implement CSS3 for it’s selector the :checked could be used.

    While the :checked pseudo-class is dynamic in nature, and is altered by user action, since it can also be based on the presence of the semantic HTML4 selected and checked attributes, it applies to all media.

    See http://www.w3.org/TR/css3-selectors/#UIstates

  13. Yann

    Do you know your script doesn’t work on IE ?

  14. Luke Hoggett

    In response to Yann’s comment to have this pseudo selector and other play nice with IEs you might like to have a look at this Mootools Core ticket on Lighthouse

    from Valerio’s comment there the script would need to be something like (note haven’t tested)

    Selectors.Pseudo.selected = function(){
        return (this.selected && 'option' == Element.get(this, 'tag'));
    };
    
  15. Thunder Mountain

    For IE and FF support you can wrap it in a Try/Catch

    Selectors.Pseudo.selected = function(){
        var tag;
    
        try {
            tag = Element.get(this, 'tag');
        } 
        catch (ex) {
            tag = this.get('tag');
        }
    
         return (this.selected && ‘option’ == tag);
    );
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...

  • OSCON Portland:  Conference Giveaway and Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...