dijit/form/Select onSelect event

Question

Are there other events that can be registered with dojo/form/Select, except onChange?

I'd need to execute a callback function every time user selects an option, even though he selects the same option as it was selected last time. The options I have tried: onSelect, onClick did not work.

        var spatialSelectionStore = new Memory({
        data: [
            { label: "Rectangle", id: "RECT" },
            { label: "Polygon", id: "POLY" },
            { label: "Circle", id: "CIRC" },
            { label: "Freehand", id: "FREE" }
        ]
    });

    var os = new ObjectStore({ objectStore: spatialSelectionStore });

    spatialQuerySelect = new Select({
        id: "selectionType",
        style: { width: "100px" },
        store: os,
        onChange: activateDrawTool
    }, "cp_selectByShapeId");
    spatialQuerySelect.startup();

Answer 1

I found a way to do this, and while it may not be the best way to do it, it seems to work.

I set up an aspect to fire a function after the Select._setValueAttr function executes, which is fired by the widget every time you click on either the menu drop-down or a drop-down item. Because of this, I added a check to make sure the function callback only fires when you click on a menu item (i.e. after the menu has closed). I also had to delete the onChange callback you added to Select manually, as this interfered with the aspect.

HTML

<div id="foo"></div>

JavaScript

require(["dojo/aspect", "dojo/store/Memory", "dijit/form/Select", "dojo/data/ObjectStore", "dojo/dom-construct", "dojo/dom", "dojo/aspect"], function(aspect, Memory, Select, ObjectStore, domConstruct, dom, aspect) {

    var spatialSelectionStore = new Memory({
        data: [
            { label: "Rectangle", id: "RECT" },
            { label: "Polygon", id: "POLY" },
            { label: "Circle", id: "CIRC" },
            { label: "Freehand", id: "FREE" }
        ]
    });

    var os = new ObjectStore({ objectStore: spatialSelectionStore });

    spatialQuerySelect = new Select({
        id: "selectionType",
        style: { width: "100px" },
        store: os
    }, "cp_selectByShapeId");
    spatialQuerySelect.startup();

    aspect.after(spatialQuerySelect, "_setValueAttr", function() {
        if(spatialQuerySelect.dropDown.isShowingNow === false) {
            alert(spatialQuerySelect.get('value'));
        }
    });

    domConstruct.place(spatialQuerySelect.domNode, dom.byId("foo"), "first");
});

Fiddle

Aspects can be very powerful, but if you use too many and rely on them too heavily, you can end up with a horrible mess of spaghetti code, so I recommend you use them sparingly, and only when necessary.

In case you're not familiar with what they do, you can tell an aspect to fire before, after, or around another method, and the aspect will "listen" to that method being fired and behave appropriately with your function callback. Further documentation.

Answer 2

spatialQuerySelect.dropDown.on("execute",function() {
alert(spatialQuerySelect.get('value'));
});

this would also work for all option.

onExecute: function(){
            // summary:
            //      Attach point for notification about when a menu item has been executed.
            //      This is an internal mechanism used for Menus to signal to their parent to
            //      close them, because they are about to execute the onClick handler.  In
            //      general developers should not attach to or override this method.
            // tags:
            //      protected
        },