+ Start a Discussion
Max PaqMax Paq 

Multiple ui:inputSelect in lightning component

Hey everyone,

I am hoping someone can point to me what I am doing something wrong. I have 3 UI:inputSelect field in a lightning component and they all show data correctly. However, whenever I select an option in my second and third field the value never change.


Thank you for your help,
<ui:inputSelect aura:id="buildingList" change="{!c.onBuildingSelection}">
     <ui:inputSelectOption label="Please Select a building"/>
     <aura:iteration items="{!v.buildings}" var="building">
          <ui:inputSelectOption label="{!building.Name}" text="{!building.Id}" />
      </aura:iteration>
</ui:inputSelect>

<ui:inputSelect aura:id="inspectionList" change="{!c.onInspectionSelection}">
     <ui:inputSelectOption label="Please Select an Inspection"/>
     <aura:iteration items="{!v.inspections}" var="inspection">
           <ui:inputSelectOption label="{!inspection.Name}" text="{!inspection.id}"/>
     </aura:iteration>
</ui:inputSelect>
        
<ui:inputSelect aura:id="spaceList">
     <ui:inputSelectOption label="Please Select a Space"/>
     <aura:iteration items="{!v.spaces}" var="space">
                    <ui:inputSelectOption label="{!space}"/>
     </aura:iteration>
</ui:inputSelect>

 
James LoghryJames Loghry
Try setting text="{!space}" in the last inputSelectOption and see if that makes a difference, at least for the last ui:inputSelect.

Also, do the controller methods attached to the onchange event do anything in regards to the inputSelect value?
Max PaqMax Paq
They do, Inspections and Spaces are child objects of building. so when you select a building the inspection and space lists are populated.

So I think I got it to work by moving my  <ui:inputSelectOption label="please select"/> after my aura:iteration
James LoghryJames Loghry
Ah, great.  There was at least a defect with aura:iteration not rerendering properly as well, which could potentially cause your issue.  The fix for that is to wrap your iteration component inside of a <span></span> tag as described here: https://developer.salesforce.com/forums/?id=906F0000000BKAMIA4
Fred13Fred13
Hi.  could you please share your javascript controller?  I'm trying to do the same thing.  I have several lightning:select fields and I am trying to figure out how I update the resulting records to include all of the filters for each field.  Not sure if I should be using the same function for each field and just include the logic in that one function or should there be a seperate function for each field.  I'm struggline with the actual code either way.  For one field I had this working.. just struggling for how I make the filter work with multiple fields?  Any help would be greatly appreciated!! Here is the code that handles just one field:
handleSelect : function(component, event, helper) {
        var groupstructures = component.get("v.groupstructures");
  //The groupstructureList is getting populated correctly in the below line of code
        var groupstructureList = component.get("v.groupstructureList");
         console.log('this is the groupstructures in STatus ' + component.get("v.groupstructures"));
        var selectedActive = component.find("select").get('v.value');
        var filter = [];
        var k = 0;
        for (var i=0; i<groupstructureList.length; i++){
            var c = groupstructureList[i];
              if (selectedActive != "All"){
                 if(c.Active__c == selectedActive) {
                    filter[k] = c;
                    k++; 
                }
            }
            else {
                   filter = groupstructureList;
             }
         }
      
   
        //Set the filtered list of contacts based on the selected option
        component.set("v.groupstructures", filter);
        helper.updateTotal(component);
        
    },