Dependent Picklists in Lightning component

ExampleApp.app

<aura:application extends="force:slds">
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>

	<aura:attribute name="dataArray" type="List"/>

	<aura:attribute name="stateList" type="List"/>

	<aura:attribute name="stateCityMap" type="Object"/>

	<div aura:id="parent-aura-div-id" style="width:50%;margin-top:50px;margin-left:50px;">
	    <table class="slds-table slds-table_bordered slds-table_col-bordered ">
	        <thead>
	            <tr>
	                <th style="width:10px;">Row #</th>
	                <th style="width:20px;">State</th>
	                <th style="width:20px;">City</th>
	            </tr>
	        </thead>
	        <tbody>
	            <aura:iteration items="{!v.dataArray}" var="dataVar">
	                <tr>
	                    <td>{!dataVar.name}</td>
	                    <td id="{! dataVar.name + '_state_td'}">
	                        <select class="slds-select" 
	                                id="{! dataVar.name + '_state'}" 
	                                onchange="{!c.stateChanged}">
	                            <aura:iteration items="{!v.stateList}" var="stateVar">
	                                <option text="{!stateVar}" 
	                                        selected="{! stateVar eq dataVar.state}"/>  
	                            </aura:iteration>
	                        </select>
	                    </td>
	                    <td id="{! dataVar.name +'_city_td'}">
	                        <select class="slds-select" 
	                                id="{! dataVar.name + '_city'}">
	                        </select>
	                    </td>
	                </tr>
	            </aura:iteration>               
	        </tbody>
	    </table>
	</div>

</aura:application>

ExampleAppController.js

// Controller
({

	doInit: function(component,event,helper){
		var dataArray = [];
		dataArray.push({name:'1',state:'MA',city:'Boston'},{name:'2',state:'NY',city:'NYC'});
		component.set('v.dataArray',dataArray);

		var stateList = [];
		stateList.push('MA','NY');
		component.set('v.stateList',stateList); 

		var stateCityMap = {};
		stateCityMap['MA'] = [];
		stateCityMap['MA'].push('Boston','Boston_X');
		stateCityMap['NY'] = [];
		stateCityMap['NY'].push('NYC','NYC_X');
		component.set('v.stateCityMap',stateCityMap);				
	},

    stateChanged: function(component,event,helper){
    	var rowId = event.target.id.split('_')[0];
    	var stateSelected = event.target.value;
    	var citySelElem = component.find('parent-aura-div-id').getElement().querySelector('[id="'+rowId + '_city"]');
    	var stateCityMap = component.get('v.stateCityMap');
    	var cityArray = stateCityMap[stateSelected];
    	var innerHTMLVar = '';
    	for (var i = 0; i < cityArray.length; i++) {
    		innerHTMLVar = innerHTMLVar + '<option value="' + cityArray[i]+ '">' +cityArray[i] +'</option>';  
    	}
    	citySelElem.innerHTML = innerHTMLVar;
    },

    onRender : function(component,event,helper){
    	debugger;
    	console.log('From Render method');
    	var rootElem = component.find('parent-aura-div-id').getElement();
		var stateElemArray = rootElem.querySelectorAll('select[id$="_state"]');
    	var stateCityMap = component.get('v.stateCityMap');
		var dataArray = component.get('v.dataArray');
		for (var i = 0; i < stateElemArray.length; i++) {
			console.log(stateElemArray[i].value);
			var rowId = stateElemArray[i].id.split('_')[0];
			var citySelElem = rootElem.querySelector('select[id$="' + rowId +'_city"]');
			var cityArray = stateCityMap[stateElemArray[i].value];
			var innerHTMLVar = '';
	    	for (var j = 0; j < cityArray.length; j++) {
	    		if(cityArray[j] == dataArray[rowId-1].city){
	    			innerHTMLVar = innerHTMLVar + '<option value="' + cityArray[j]+ '" selected="true">'+ cityArray[j] +'</option>';  	
	    		}else{
	    			innerHTMLVar = innerHTMLVar + '<option value="' + cityArray[j]+ '">'+ cityArray[j] +'</option>';
    			}
	    	}
	    	citySelElem.innerHTML = innerHTMLVar;			
		}
    }
})

This leaves the output: