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