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
    From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    Flashy FAQs Using MooTools Sliders

    I often qualify a great website by one that pay attention to detail and makes all of the "little things" seem as though much time was spent on them. Let's face it -- FAQs are as boring as they come. That is, until you...

  • By
    Image Reflection with jQuery and MooTools

    One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. Unfortunately creating image reflections within your...

Discussion

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