(Lightning) How do I get the selected value from a Select dropdown list & send it to a method?

Question

I'm trying to implement a single option select dropdown list for my component, and I've gotten as far as displaying the data members and the correct values for them. However, I can't find any example within the SLDS website that gives me an idea of how to get this value out. I'm still new to working with Lightning(and front-end in general).

Here's the code I've written:

<aura:component>
<aura:attribute name="productCategories" type="Object[]"/>

<aura:handler name="change" value="{!v.productCategories}" action="{!c.doInit}"/>

<div class="slds-form-element__control">
    <div class="slds-select_container">
        <select id="categoryPicklist" class="slds-select">
            <option>All</option>
            <aura:iteration items="{!v.productCategories}" var="category" indexVar="index">
                <option>{!category.label}</option>
            </aura:iteration>
        </select>
    </div>
</div>

</aura:component>

How would I get the chosen option data and pass it into my controller?

Answer 1

In your javascript controller, you can get the component using the find method and then get the attribute value of the comonent using the get method..

component.find("categoryPicklist").get("v.value");

Refer this Trailhead module for more details

Answer 2

Use below Code snippet in Component 1. Bind using aura:id

<ui:inputSelect aura:id="testing" change="{!c.addpicklistval}">

Controller code : Pass the element id to the

addpicklistval : function(component, event, helper) {
    helper.addpicklistvalue(component,event);

Helper Code :

addpicklistvalue:function(component,event,elementId)
Iterate the declared var opts to the lenght of picklist values
    {   component.find(elementId).set("v.options", opts);
       var selectedValue= event.getSource().get("v.value");
        console.log(selectedValue);
    }

Hope this helps!!

Answer 3

I do not understand guys why everybody trying to get selected value by select aura:id. In theory you can make a typo and get value of other select.

For me safer and the only proper way to get value of select list is obtain it from event, like below

onChangeSelect : function(component, event, helper) {
    var selectedItem = event.getSource().get("v.value");
}

Answer 4

In your code snippet you are using hybrid controls instead of aura controls. When you do that the get("v.value") method does not work. You can use javascript to reference the html element but it might be better to use the ui:inputSelect and ui:inputSelectOption controls.

Check out the docs: UI_Select

Also if you are using hybrid controls you might want to check out this example: Events with Client-side controllers

Answer 5

Lightning Design System is CSS only framework and there you can find out only html markup examples and not the javascript pieces how to manipulates the data.

Instead of implementing your own component for simple select list it's better to use a standard on lightning:select

A lightning:select component creates an HTML select element. This component uses HTML option elements to create options in the dropdown list, enabling you to select a single option from the list. Multiple selection is currently not supported.

This component inherits styling from input select in the Lightning Design System.

And regarding to getting values in js controller and passing it to APEX the basic approach is the following:

• Bind js controller method to some event, like onchange
• In js contoller method find the component/html element using component.find('aura_id') and get value from it either .get('v.value') if component.find returns reference to aura component or `.getElement().value if reference plain html element.
• Enqueue a server side action using $A.enqueAction