<ui:inputSelect aura:id="pricebooks">
<ui:inputSelectOption text="" label="--None--" />
<aura:iteration items="{!v.pricebooks}" var="pricebook">
<ui:inputSelectOption text="{!pricebook.Id}" label="{!pricebook.Name}" />
</aura:iteration>
</ui:inputSelect>
<button onclick="{!c.selectPricebook}">Select</button>
Controller code:
I've examined the selectCmp object in the debugger and the label property is, in fact, "undefined". What could be the problem here?({
selectPricebook: function(component, event, helper) {
var selectCmp = component.find("pricebooks");
var value = selectCmp.get("v.value");
console.log(value); // The expected result
var label = selectCmp.get("v.label");
console.log(label); // undefined
})
This appears to be a core omission from the Aura framework. I was able to locate their docs and none of their examples for the inputSelect component retrieve the label of the selected option. The majority of their examples simple set the "text" attribute which the framework appears to use as the label by default.In my experience, I've used a select option as a means to store key-value pairs without having to populate a controller-side data structure. However, in this case I was forced to. My solution is a quick and dirty one.Solution: // Controller
({
doInit: function(component, event, helper) {
helper.getPricebooks(component);
},
selectPricebook: function(component, event, helper) {
var selectCmp = component.find("pricebooks");
var value = selectCmp.get("v.value");
var label = helper.getPricebookName(value);
console.log(label); // Expected value
}
})
// Helper
({
pricebookIdToNameMap: {},
getPricebooks: function(component) {
var action = component.get("c.getPricebooks");
var self = this;
function buildPricebookMap(pricebooks) {
for (var index in pricebooks) {
self.pricebookIdToNameMap[pricebooks[index].Id] = pricebooks[index].Name;
}
}
action.setCallback(this, function(actionResult) {
var pricebooks = actionResult.getReturnValue();
buildPricebookMap(pricebooks);
component.set("v.pricebooks", pricebooks);
});
$A.enqueueAction(action);
},
getPricebookName: function(id) {
return this.pricebookIdToNameMap[id];
}
})
