How to populate the selected value in dynamic picklist in lightning component?

Question

I have a parent component named "ApplicationForm" where I am calling another child component 'DynamicPicklists' to handle the dynamic picklist functionality. There can be multiple picklists available in the form and thus, inside the aura:iteration every new picklist is getting created with their options.

Parent Lightning Component sample markup:

<div class="block-section general-questions">
<table>
    <tbody>                           
        <aura:iteration items="{!v.QuestionWrapperList}" var="question_wrapper">

            <c:DynamicPicklists QuestionWrapper="{!question_wrapper}" />

        </aura:iteration>
    </tbody>
</table>

Child Component(i.e. DynamicPicklists) markup:

<aura:attribute name="QuestionWrapper" type="ApplicationFormController.QuestionNResponseWrapper" access="public" />
<aura:attribute name="picklistOptions" type="String[]" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<ui:inputSelect aura:id="inputPicklistId" 
            class="slds-input question-input"
            change="{!c.onBlurQuestion}"
            multiple="false" value=""
             >
    <ui:inputSelectOption text="" label="Select" />
    <aura:iteration items="{!v.picklistOptions}" var="option">
        <ui:inputSelectOption text="{!option}" label="{!option}" />
    </aura:iteration>                    
</ui:inputSelect>

DynamicPicklists.js

doInit : function(component, event, helper) {
    var questionWrapper = component.get("v.QuestionWrapper");

    var picklistOptionStr = questionWrapper.Choices__c;
    var options = [];

    if(picklistOptionStr != null && picklistOptionStr != ""){

        picklistOptions = picklistOptionStr.split("\n");//Email, Direct Mail

        component.set("v.picklistOptions", picklistOptions);
    }
    var inptcomp = component.find("inputPicklistId");
    inptcomp.set("v.value", "Email");
}       

Apex Controller:

public class ApplicationFormController{

public class QuestionNResponseWrapper{
    @AuraEnabled
    public Event_Question__c question;

    @AuraEnabled
    public Question_Response__c question_response;

    @AuraEnabled 
    public boolean isValidated;
}

public static List<ApplicationFormController.QuestionNResponseWrapper> getQuestions(){

    // More Code 

    List<Event_Question__c> listOfEventQuestion = [Select Id, Name, Question__c, Informative_Text__c,
                                                       Choices__c, Sort_Order__c, Required__c, Event_Program__c, Type__c
                                                       from Event_Question__c 
                                                       where Event_Program__r.Name = 'Test Event'
                                                       order by Sort_Order__c];

    listOfEventQuestion = [Select Id, Name, Question__c, Informative_Text__c,
                                   Choices__c, Sort_Order__c, Required__c, Event_Program__c, Type__c
                                   from Event_Question__c 
                                   where Event_Program__r.Name = 'Test Event' 
                                   order by Sort_Order__c];
     //Prepare Open Ended Questions
    List<ApplicationFormController.QuestionNResponseWrapper> questionNResponseList = new List<ApplicationFormController.QuestionNResponseWrapper>();

    if(!listOfEventQuestion.isEmpty()){

        List<Question_Response__c> listOfQuestionResponses = [Select Id, Name, Response__c, Event_Question__c, Application__c 
                                                              from Question_Response__c 
                                                              where Application__c =: applicationId and Event_Question__c in : listOfEventQuestion];

        for(Event_Question__c question : listOfEventQuestion){
            ApplicationFormController.QuestionNResponseWrapper questionNResponse = new ApplicationFormController.QuestionNResponseWrapper();
            questionNResponse.question = new Event_Question__c();
            questionNResponse.question = question;

            for(Question_Response__c questionResponse : listOfQuestionResponses){
                if(questionResponse.Event_Question__c == question.Id){
                    questionNResponse.question_response = questionResponse;
                    system.debug('##questionResponse: '+questionResponse);
                }                          
            }

            questionNResponseList.add(questionNResponse);                   
        }

    }   

    return questionNResponseList;       
}}

Now, in doInit I want to set the selected value of particular picklist as provided by the user in previous response which I'll fetch from the backend. But, every time the doInit method of child component gets invoked the selected value is not getting populated and was set to the default null value.

Please provide any workaround or suggestion that might help to resolve this.

Answer 1

Use aura attribute to bind ui:inputSelect value. You can populate selected value in doInit using component.set("v.selectedValue", selectedOption);

<aura:attribute name="selectedValue" type="String" />

<ui:inputSelect aura:id="inputPicklistId" 
        class="slds-input question-input"
        change="{!c.onBlurQuestion}"
        multiple="false" value="{!v.selectedValue}">

Answer 2

I have updated the code in doInit method by using the JavaScript array to initialize the inputSelect list and then populating the selected value in it.

doInit : function(component, event, helper) {
    var questionResponse = component.get("v.QuestionResponse");

    var picklistOptions = [];
    var picklistOptionsValueSet = component.get("v.picklistOptions");

    if(questionResponse.question.Type__c == "Picklist" && (picklistOptionsValueSet == undefined || picklistOptionsValueSet == null || picklistOptionsValueSet == '')){
        var picklistOptionStr = questionResponse.question.Choices__c;
        var options = [];

        if(picklistOptionStr != null && picklistOptionStr != ""){

            picklistOptions = picklistOptionStr.split("\n");
            component.set("v.picklistOptions", picklistOptions);              

            var selectObj = new Object();
            selectObj.label = 'Select';
            selectObj.value = "";

            options.push(selectObj);

            for(var i=0; i < picklistOptions.length; i++){
                var obj = new Object();
                obj.label = picklistOptions[i];
                obj.value = picklistOptions[i];
                if(questionResponse.question_response != undefined){
                    var responseText = questionResponse.question_response.Response__c;

                    if(responseText != undefined && responseText != ''){
                        responseText = responseText.replace(/<(?:.|\n)*?>/gm, '');
                        obj.selected = obj.label.indexOf(responseText) != -1 ? true : false;
                    }
                }

                options.push(obj);
            }
            var inptcomp = component.find("inputPicklistId");
            inptcomp.set("v.options", options);

        }

    }

}

This is working for me.