I'm looking at alternate ways of implementing dependent picklists that are within an aura:iteration. Basic processing is that I am displaying a list of records with a couple of fields rendered as input (the controlling and dependent picklist). Unfortunately, this did not work for me and I've tried:

1. lightning:recordEditForm - The form renders the fields vertically and both picklists need to be rendered at the same time, which is not the case for an iterating list of records and fields.
2. ui:inputselect, but hit a snag where aura:id can not take in dynamically generated values and therefore the controller does not have any way to determine what specific inputselect tag in the list of records it will try to rerender.

Please see code sample below:
 

<aura:iteration items="{!v.displayDTORecord}" var="item">
<tr class="slds-hint-parent">
    <aura:iteration items="{!item.lstFieldVal}" var="f">
        <aura:if isTrue="{!f.field_api == 'Name'}">
            <td role="gridcell" data-label="{!f.field_api}">
                <div class="slds-truncate" title="{!f.value}">
                    <a href="javascript:void(0);" id="{!item.recId}" onclick="{!c.doRedirect}"><span>{!f.value}</span></a>
                </div>
            </td> 
        <aura:set attribute="else">
            <td role="gridcell" data-label="{!f.field_api}">
                <aura:if isTrue="{!f.field_api != 'Additional_Details__c'}">
                    <aura:if isTrue="{!f.inputField == false}">
                        <div class="no-text-overflow slds-truncate" title="{!f.value}">{!f.value}</div>
                    <aura:set attribute="else">

                        <aura:if isTrue="{!f.field_api == 'Offer_Status__c'}">
            <!--            
                            <div class="slds-form-element">
                                <div class="slds-select_container">
                                    <ui:inputSelect aura:id="{!f.field_api_idx}" change="{!c.onControllerTOFieldChange}" value="{!f.value}"/>
                                </div>
                            </div>
            -->
                            <lightning:select name="mySelect" label="" aura:id="{!f.field_api_idx}" value="{!f.value}">
                                 <aura:iteration items="{!v.options}" var="item">
                                    <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
                                </aura:iteration>
                            </lightning:select>
                            <aura:set attribute="else">
                                <div class="slds-form-element">
                                    <div class="slds-select_container">
                                        <ui:inputSelect aura:id="Offer_Outcome__c" disabled="{!v.isDependentDisableTO}" change="{!c.onDependentTOFieldChange}" value="{!f.value}" />
                                    </div>
                                </div>
                            </aura:set>
                        </aura:if>                                                                          
                    </aura:set>
                </aura:if>

Is there a workaround or something that you would've similarly implemented successfully? Thanks.

I'm looking at alternate ways of implementing dependent picklists that are within an aura:iteration. Basic processing is that I am displaying a list of records with a couple of fields rendered as input (the controlling and dependent picklist). Unfortunately, this did not work for me and I've tried:

1. lightning:recordEditForm - The form renders the fields vertically and both picklists need to be rendered at the same time, which is not the case for an iterating list of records and fields.
2. ui:inputselect, but hit a snag where aura:id can not take in dynamically generated values and therefore the controller does not have any way to determine what specific inputselect tag in the list of records it will try to rerender.

Please see code sample below:
 

<aura:iteration items="{!v.displayDTORecord}" var="item">
<tr class="slds-hint-parent">
    <aura:iteration items="{!item.lstFieldVal}" var="f">
        <aura:if isTrue="{!f.field_api == 'Name'}">
            <td role="gridcell" data-label="{!f.field_api}">
                <div class="slds-truncate" title="{!f.value}">
                    <a href="javascript:void(0);" id="{!item.recId}" onclick="{!c.doRedirect}"><span>{!f.value}</span></a>
                </div>
            </td> 
        <aura:set attribute="else">
            <td role="gridcell" data-label="{!f.field_api}">
                <aura:if isTrue="{!f.field_api != 'Additional_Details__c'}">
                    <aura:if isTrue="{!f.inputField == false}">
                        <div class="no-text-overflow slds-truncate" title="{!f.value}">{!f.value}</div>
                    <aura:set attribute="else">

                        <aura:if isTrue="{!f.field_api == 'Offer_Status__c'}">
            <!--            
                            <div class="slds-form-element">
                                <div class="slds-select_container">
                                    <ui:inputSelect aura:id="{!f.field_api_idx}" change="{!c.onControllerTOFieldChange}" value="{!f.value}"/>
                                </div>
                            </div>
            -->
                            <lightning:select name="mySelect" label="" aura:id="{!f.field_api_idx}" value="{!f.value}">
                                 <aura:iteration items="{!v.options}" var="item">
                                    <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
                                </aura:iteration>
                            </lightning:select>
                            <aura:set attribute="else">
                                <div class="slds-form-element">
                                    <div class="slds-select_container">
                                        <ui:inputSelect aura:id="Offer_Outcome__c" disabled="{!v.isDependentDisableTO}" change="{!c.onDependentTOFieldChange}" value="{!f.value}" />
                                    </div>
                                </div>
                            </aura:set>
                        </aura:if>                                                                          
                    </aura:set>
                </aura:if>

Is there a workaround or something that you would've similarly implemented successfully? Thanks.

Hi all,

I have an custom object named country with two picklist fields country and states.  Country is the controlling field for States.  Now I want to display these two picklist in the lightning page with the controlling and dependent picklist behavior.  Kindly let me know how I can achieve this.

Thanks in advance

Regards

V Swathi