function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
bretondevbretondev 

onChange event on lightning:select throws error message

I have a picklist with an onchange event bound to it.
When I select a value in the picklist, I get the following error message :
This page has an error. You might just need to refresh it. Error in $A.getCallback() [b.run is not a function] Failing descriptor: {lightning:select}

Component :
 
<aura:component>
    
    <aura:attribute name="colors" type="String[]"/>
    <aura:attribute name="selectedColor1" type="String"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
    
    <lightning:select aura:id="select1-id" value="{v.selectedColor1}" onchange="{c.onChangeColor}" name="picklist1" label="Select a Color"  >
        <option value="">-- None --</option>
        <aura:iteration items="{!v.colors}" var="color">
            <option value="{!color.value}" text="{!color.label}"></option>
        </aura:iteration>
    </lightning:select>
    
</aura:component>
Controller :
({
    loadOptions: function (component, event, helper) {
        var opts = [
            { value: "R", label: "Red" },
            { value: "G", label: "Green" },
            { value: "B", label: "Blue" }
         ];
         component.set("v.colors", opts);
    },
    onChangeColor: function (component, event, helper) {
        //var myColor = event.getSource().get("v.value");
        //var test;
    }
})


 
Best Answer chosen by bretondev
Ashif KhanAshif Khan
Hii

There is small syntext error issue -- {!v.selectedColor1}​ & {!c.onChangeColor} here​  ' ! ' is missing
<lightning:select aura:id="select1-id" value="{!v.selectedColor1}" onchange="{!c.onChangeColor}" name="picklist1" label="Select a Color"  >
        <option value="">-- None --</option>
        <aura:iteration items="{!v.colors}" var="color">
            <option value="{!color.value}" text="{!color.label}"></option>
        </aura:iteration>
    </lightning:select>

Regards
Ashif

 

All Answers

Ashif KhanAshif Khan
Hii

There is small syntext error issue -- {!v.selectedColor1}​ & {!c.onChangeColor} here​  ' ! ' is missing
<lightning:select aura:id="select1-id" value="{!v.selectedColor1}" onchange="{!c.onChangeColor}" name="picklist1" label="Select a Color"  >
        <option value="">-- None --</option>
        <aura:iteration items="{!v.colors}" var="color">
            <option value="{!color.value}" text="{!color.label}"></option>
        </aura:iteration>
    </lightning:select>

Regards
Ashif

 
This was selected as the best answer
Shane James 13Shane James 13
The application we are going to build is an Employee Store (similar to a shopping cart) where users can redeem their “reward points” for products. From a high level, the app has a picker component that allows the user to choose the product to view from a Custom Object, a product view component that displays the currently selected product from the picker, a cart component that tracks products added to the cart and a small notification component that simply displays the name of the last product added to the cart. 
Overholt JonesOverholt Jones
The magic happens when you combine the required, onchange, and messageWhenValueMissingattributes together.
<aura:attribute name="colors" type="String[]" default="Red,Green,Blue"/> 
<lightning:select aura:id="select" name="select"   
                                                     label="Select a Color"   
                                                     required="true"   
                                                    onchange="{! c.onChange }" 
                                                    messageWhenValueMissing="Choose one!"> 
<option value="">-- None --</option> 
<aura:iteration items="{!v.colors}" var="color"> 
<option value="{!color}" text="{!color}"></option> 
</aura:iteration> </lightning:select>
The error message specified by messageWhenValueMissing is shown when the first option is selected. You can also pair this solution with the showHelpMessageIfInvalid method to trigger the error from your JS controller. https://telldunkin.us