function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Andrew Aldis 15Andrew Aldis 15 

Get the value from a HTML select element in a lighting component

I am trying to get the value from a HTML select element in a Lighting Component, I need to user select because I am unable to correctly style a lighting:select component.  I need to get the value of the component when it is changed, but cannot seem to get it the sameway I would if it was a lightning component.  Any help is appreciated. 
Lighting Component
    <div aura:id="header" class="header">
        <div class='titleInput'>
            REGION:
            <select name="select" label="" aura:id='select' class="select" onchange="{!c.changeRegion}">
                <aura:iteration items="{!v.regions}" var="regions">
                    <option text="{!regions}"></option>
                </aura:iteration>
            </select>
            - SALES AND REDEMPTIONS
        </div>

Component.Js
  changeRegion: function(component, event, helper) {
    console.log('onchange called 1 ');
    var inputRegion = component.find('select').get('v.value');
    console.log(inputRegion);
    //helper.getRegionalSalesRedemptions(component);
  },
Best Answer chosen by Andrew Aldis 15
Raj VakatiRaj Vakati
Try this code
  
<div aura:id="header" class="header">
        <div class='titleInput'>
            REGION:
           <ui:inputSelect name="select" label="" aura:id='select' class="select" onchange="{!c.changeRegion}">
                <aura:iteration items="{!v.regions}" var="regions">
                    <ui:inputSelectOption value="{!regions}"></ui:inputSelectOption>
                </aura:iteration>
           </ui:inputSelect>
            - SALES AND REDEMPTIONS
        </div>
  
changeRegion: function(component, event, helper) {
    console.log('onchange called 1 ');
    var inputRegion = component.find('select').get('v.value');
    console.log(inputRegion);
    //helper.getRegionalSalesRedemptions(component);
  },

OR

use 
  
document.getElementById(component.fing("select")).value

​

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Andrew,

I trust you are doing very well.

Try this:
  
<select name="select" label="" aura:id="select" class="select" onchange="{!c.changeRegion}">

Or you can use id instead of aura:id as you are using HTML select tag.
  
<select name="select" label="" id="select" class="select" onchange="{!c.changeRegion}">

And in JS, use: 
var inputRegion = component.find("select").get("v.value");

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas
 
Andrew Aldis 15Andrew Aldis 15
Hi Kahn, that does not work, chaning it from aura:id to id does not work, it comes back undefined.
 
Raj VakatiRaj Vakati
Try this code
  
<div aura:id="header" class="header">
        <div class='titleInput'>
            REGION:
           <ui:inputSelect name="select" label="" aura:id='select' class="select" onchange="{!c.changeRegion}">
                <aura:iteration items="{!v.regions}" var="regions">
                    <ui:inputSelectOption value="{!regions}"></ui:inputSelectOption>
                </aura:iteration>
           </ui:inputSelect>
            - SALES AND REDEMPTIONS
        </div>
  
changeRegion: function(component, event, helper) {
    console.log('onchange called 1 ');
    var inputRegion = component.find('select').get('v.value');
    console.log(inputRegion);
    //helper.getRegionalSalesRedemptions(component);
  },

OR

use 
  
document.getElementById(component.fing("select")).value

​
This was selected as the best answer