1

According to lightning:select documentation the following should work:

Component Markup

<lightning:select name="selectBoatType" 
                aura:id="currentBoatTypeChoice" 
                label=""
                value="{!v.selectedValue}">
    <option value="All Types">All Types</option>
    <aura:iteration items="{!v.boatType}" var="type">
        <option text="{!type.Name}" 
                value="{!type.Name}"
                selected="{!type.selected}"></option>
    </aura:iteration>
</lightning:select>

Controller

onFormSubmit : function(component,event,helper){
    console.log("in onFormSubmit");
    var currentBoatTypeChoice = component.find("currentBoatTypeChoice").get("v.value");
    console.log("cBTC is "+currentBoatTypeChoice); //returns undefined
}

I've determined component.find() is indeed returning a component, so it appears as though .get("v.value") isn't functioning correctly. The Id being used in component.find() is local and unique.

2
  • What browser are you on? Your code works on Chrome.
    – sfdcfox
    Aug 16, 2018 at 5:40
  • I am also on Chrome. Not sure how you're testing, but the value shouldn't be returning undefined. The attribute which is being iterated on is an array whose Names should be returned via the controller depending on the selected value. Aug 16, 2018 at 5:41

1 Answer 1

1

Based on what you have shared, it looks like you are missing the value attribute, which is why currentBoatTypeChoice returns undefined. as well as the currently selected option using the 'selected' attribute.

<option text="{!type.Name}"></option>
//component.find("currentBoatTypeChoice").get("v.value") == undefined

should be

<option text="{!type.Name}" value="{!type.Name}" selected="{!item.selected}"/></option>
//component.find("currentBoatTypeChoice").get("v.value") == type.Name

when adding a selected attribute, make sure you declare one of type string as well in your component:

<aura:attribute name="selectedValue" type="String" default=""/>

as per the select component, you should also attribute it the value attribute:

<lightning:select name="selectBoatType" label="Select a Boat Type Name:" aura:id="currentBoatTypeChoice" value="{!v.selectedValue}">

went back to your original approach (the below works):

component.cmp

<lightning:select aura:id="currentBoatTypeChoice"  name="selectItem" label="Select an item" onchange="{!c.doSomething}">
    <option value="">choose one...</option>
    <option value="1">one</option>
    <option value="2">two</option>
</lightning:select>

<lightning:button label="submit" onclick="{!c.submit}"/>

controller.js

submit : function(component, event, helper) {
    var currentBoatTypeChoice = component.find("currentBoatTypeChoice").get("v.value");
    console.log("cBTC is "+currentBoatTypeChoice); //returns a value
},
5
  • you're right about the value attribute, but it's still returning undefined. I've updated my question to reflect my current code. I've confirmed that aura:iteration attribute value is correct as well (the options are rendering in the component). Aug 16, 2018 at 5:23
  • 1
    and your 'selected' attribute on the option element =P
    – glls
    Aug 16, 2018 at 5:34
  • I've updated my code with your suggestions which are spot on, but still returning undefined. Aug 16, 2018 at 5:43
  • 1
    well, i did your original approach, when i change value and submit, i am able to get the value without any issues =/ (using chrome as well) ill add the code at the end of my post.
    – glls
    Aug 16, 2018 at 5:56
  • Let us continue this discussion in chat. Aug 16, 2018 at 6:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .