returns "undefined" when passing the first default value of drop down list to controller using index variable

Question

i am not able to pass the default value of drop down list to my controller. When i click on submit button without changing the drop down list value (ie. index 0 is set as default value), add function of controller is getting called where i am displaying the drop down list value. I am getting "undefined" instead of "abc". Please suggest what is missing in the code.

Below is my code:

Component:

    <aura:attribute name="it" type="string[]" />

    <!-- List -->
    <div id="">
            <div class="list-group">
                <div class="list-group-item">
                    <ui:button press="{!c.DetailPage}" class="btn btn-success pull-right" >plus</ui:button>
                    <h4 class="list-group-item-heading">test</h4>
                </div>
            </div>
    </div>

    <!-- Screen opens when {!c.DetailPage}  -->  
    <div class="container">
    <form aura:id="frm1">
        <fieldset>
        <ui:inputSelect aura:id="P"> 
            <aura:iteration items="{!v.it}" var="item" indexVar="index">
                <aura:if isTrue="{!index ==0}" >
                    <ui:inputSelectOption text="{!item}" value="true"/>
                    <aura:set attribute="else">
                        <ui:inputSelectOption text="{!item}"/>
                    </aura:set>
                </aura:if>
            </aura:iteration>
        </ui:inputSelect> 
            ...
        <ui:button press="{!c.add}" class="btn btn-primary pull-right">Submit</ui:button>
        </fieldset>
    </form>
</div>

Client side controller:

DetailPage : function(component, event, helper) {

    helper.checkdefaultvalue(component, event, helper);
},
add : function(component, event, helper) { 
     var defaultDropdown = component.find("P").get("v.value");
     console.log('p..'+defaultDropdown);
     // here p value is coming as undefined instead of "abc"

   }

Helper :

checkdefaultvalue:function(component, event, helper){
    var action = component.get("c.temp"); 
    action.setCallback(this, function(response){
        var state = response.getState();    
        if (component.isValid() && state === "SUCCESS") {
            var res = response.getReturnValue();  
            component.set("v.it", res);
            console.log("it optiom: "+res);
        }else{console.log("failure...");}    
    });    
    $A.enqueueAction(action);
},

Apex class:

@AuraEnabled
public static List<String> temp() {
    List<string> temp1 = new List<string>();
    temp1.add('abc'); 
    temp1.add('def'); 
    temp1.add('ghi'); 
    System.debug('temp1...'+temp1);
    return temp1;
}   

Answer 1

I tried what you are trying to do but was unsuccessful! :(

However I have couple of alternative for you.

Option 1:

Have an aura:attribute as currentValue and set the very first picklist value in it inside the setCallBack function. Use the variable wherever you need. Also, in the CHANGE event of inputSelect, assign the selected value to the currentValue.

In your component:

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

<ui:inputSelect aura:id="P" change="{!c.setCurrentValue}">
...
</ui:inputSelect>

In your JS controller:

    setCurrentValue: function(component, event, helper){
            var newValue = component.find("P").get("v.value");
            component.set("currentValue", newValue);
        },
    add : function(component, event, helper) { 
        var v = component.get("v.currentValue");
        console.log('p..'+v);

       }

In your helper class:

checkdefaultvalue:function(component, event, helper){
        var action = component.get("c.temp"); 
        action.setCallback(this, function(response){
            var state = response.getState();    
            if (component.isValid() && state === "SUCCESS") {
                var res = response.getReturnValue();  
                component.set("v.it", res);
                component.set("v.currentValue", res[0]); //This will set the 1st value as current one
                console.log("it optiom: "+res);
            }else{console.log("failure...");}    
        });

I have tested this, its working fine.

Coming to Option 2:

inputSelect has an attribute 'updateOn' which takes an event name, firing which will update the selected Value of the picklist. By defult its CHANGE.

Now if you can fire the change event of inputSelect from JScontroller or helper, it should set the selected value of the inputSelect.

Your Component:

<ui:inputSelect aura:id="P" updateOn="change">
...
</ui:inputSelect>

In your JS Controller:

add : function(component, event, helper) { 
        component.find("P").getEvent("change").fire();
        var defaultDropdown = component.find("P").get("v.value");
        console.log('p..'+defaultDropdown);
    }

I haven't tested the 2nd solution but theoretically it should work.