Make Dijit’s FilteringSelect Widget Display an Empty Option Value Label

By  on  

I was recently working with the FilteringSelect Dojo Dijit widget and realized that when the first OPTION in the SELECT widget had a label with an empty value (like "Choose one..." or "Select you state"), the label wasn't displaying.  That's no good!  What I did was monkey patch the widget's prototype to make sure that label was displaying when it was loaded.

The Dojo JavaScript

/* Modify ComboBox and FilteringSelect to use default label if value is "" */
(function(){
    var oldPMIP = dijit.form.FilteringSelect.prototype.postMixInProperties;
    dijit.form.FilteringSelect.prototype.postMixInProperties = function(){
        if(!this.store && this.srcNodeRef.value == ''){
            var srcNodeRef = this.srcNodeRef, nodes = dojo.query("> option[value='']", srcNodeRef);
            if(nodes.length){
                this.displayedValue = dojo.trim(nodes[0].innerHTML);
            }
        }
        oldPMIP.apply(this,arguments);
    };
})();

Like my previous monkey patching tutorial, we're essentially modifying the prototype of the Dojo Dijit (FilteringSelect, in this case) we'd like to act differently.  In this case, however, we're going to "save" the original prototype so that we may trigger its original functionality after we change a few settings first.  In this case, we want to ensure that the displayedValue of the FilteringSelect is the blank option's label.  After all, empty first labels are ugly, right?

Prototype modification is super useful, isn't it?  Now every FilteringSelect will be fixed by changing this one method on the prototype.  Hmmm...prototype modification sounds very familiar to me....

Recent Features

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • By
    JavaScript Copy to Clipboard

    "Copy to clipboard" functionality is something we all use dozens of times daily but the client side API around it has always been lacking; some older APIs and browser implementations required a scary "are you sure?"-style dialog before the content would be copied to clipboard -- not great for...

  • By
    Instagram For MooTools

    If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram.  With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram...

Discussion

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