Question

I have a dijit Select widget and need to do something when the user clicks one of the dropdown items. Meaning I need access to the clicked item, to retrive some information, and call one of my own functions.

I’ve tested to attach an onChange on the select and I can get the text value selected fine. But I need the object and not the value. The object holds more values in a data-info-attribute.

Basically what I’m trying to achieve is to show one value in the list but send along more values to populate other fields when selected.

Background: This is a typeahead field populated thru AJAX by a server function. There IS a store attached but it’s empty (as far as I can tell) so I’ve been unsuccessful trying with: .store.fetchItemByIdentity – always returns nothing.

ta.store.fetchItemByIdentity({
    identity: ta.getValue(),
    onItem: function(item, request){
        console.log(item),
        console.log(request)
    }
})

I expect the log to show item- and request-object, but they’re both undefined.
ta.getValue() get’s the selected value as expected.

What’s the best way to achieve this?

Answer 1

Have a look at my answer to onChange not sufficient to trigger query from Dojo Combobox and also to jsFiddle mentioned there. I added code specific for your needs there:

select.dropDown.on("itemClick", function(dijit, event) {
    var node = dijit.domNode;
    console.log(domAttr.get(node, "data-info-attribute"));
    // or
    console.log(node.dataset.infoAttribute);
});