I am getting null value from Lightning component from document.getElementById().value below is the case. I am showing already existed record as default(pricebookId) in the dropDown from total list.

<select class="selectPB" aura:id="selectPB" name="selectPB" style="margin-top:3%;margin-left:4%;" onchange="{!c.onSelectPB}">
        <aura:iteration items="{!v.pbs}" var="pb">
             <aura:if isTrue="{!pb.id==v.pricebookId}"> 
                <option selected="selected" value="{!pb.id}">{!pb.name}</option>
                <aura:set attribute="else">
                    <option value="{!pb.id}">{!pb.name}</option>

I need to get the value of selectPB from above mentioned piece of code. But it is returning NULL while using

var selectedPBId = document.getElementById('selectPB').value;

But it is a bit strange. on the same page, I have another values which I am pulling. below is the code..

<div class="slds-form-element__control">
  <textarea id="notes" class="notes" value="{!v.notes}"/>  

in controller/helper: var notes=document.getElementById("notes").value;

On the same dom, I am able to get notes value without any issues. Why is this happening?? is there any workaround to get selectPB value from DOM?

Thanks a ton..

  • When you using aura:id in normal HTML tags use component.find('selectPB').getElement().value .When using component.find('selectPB').getElement() returns the DOM element for the select Tag so then you can normally get it. – vignesh Jan 24 '19 at 6:31

Add this to your JS method to get the value it should work. do it in lightning way native way may break in future releases.

onSelectPB : function(component,event,helper){
    var selectedValue = component.find("selectPB"); 
    var optionValue = selectedValue.get("v.value"); 
| improve this answer | |

You won't get the direct value using this. You need to do this.

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

You can also use Lightning:select for this. Then you can get direct value without using JS.

<lightning:select name="mySelect" label="Select a color:" aura:id="mySelect" value="{!v.selectedValue}">
    <aura:iteration items="{!v.options}" var="item">
         <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>

and in the controller, you can simply get the variable {!v.selectedValue}

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.