0

I have a ui:checkbox and ui:inputSelect properties on lightning component.

<ui:inputCheckbox aura:id="setColor" label="Set Color" change="{!c.onSetColor}" />

<ui:inputSelect aura:id="colors" label = "Colors" class=""/>

ui:inputselect currently displays : Red, Blue, Green and Yellow

JS controller:

onSetColor: function(component, event, helper) {
        var checkCmp = component.find("setColor").get("v.value");
        console.log(checkCmp);
        if(checkCmp){
            component.find("colors").set("v.value", "Red");
        }
        else{
            component.find("colors").set("v.value", "Blue");
        }  
    }

I can see console.log but it do not set the value of selected color based on my if condition.

1
  • It is working as expected, if you add ui:inputSelectOption in ui:inputSelect to add options. Jun 19, 2019 at 7:31

1 Answer 1

0

Components in the UI namespace are deprecated as of API version 46.0. We recommend you use components in the lightning namespace instead.

You can use lightning:select. A lot of new attribute you will get with Lightning:select as compared to UI component. A working example would be:-

<ui:inputCheckbox aura:id="setColor" label="Set Color" change="{!c.onSetColor}" />

    <aura:attribute name="colors" type="String[]" default="Red,Green,Blue"/>
    <lightning:select aura:id="select" name="select1" label="Select a Color" required="true">
        <aura:iteration items="{!v.colors}" var="color">
                <option text="{!color}"></option>
            </aura:iteration>
    </lightning:select>

and Your controller would be:-

({
    onSetColor: function(component, event, helper) {
        var checkCmp = component.find("setColor").get("v.value");
        if(checkCmp){
            component.find("select").set("v.value", "Green");
        }
        else{
            component.find("select").set("v.value", "Blue");
        }  
    }
})

Note:- There is no change in above controller as compared to you have written in question.

Read more here:- lightning:select

Update:- If you want to stick with ui:inputSelect, then You can try something like this:-

<aura:attribute name="contactLevel" type="String[]" default="Primary Contact,Secondary Contact,Other"/>
    <ui:inputSelect aura:id="levels" label="Contact Levels" change="{!c.onSelectChange}">
        <aura:iteration items="{!v.contactLevel}" var="level">
             <ui:inputSelectOption text="{!level}" label="{!level}"/>
        </aura:iteration>
    </ui:inputSelect>

And controller would be the same:-

({
    onSetColor: function(component, event, helper) {
        var checkCmp = component.find("setColor").get("v.value");
        if(checkCmp){
            component.find("levels").set("v.value", "Secondary Contact");
        }
        else{
            component.find("levels").set("v.value", "Primary Contact");
        }  
    }
})

It should work fine.

2
  • Thank you Sanket. However I would like to know if my issue can be resolved using ui:inputselect or not? If not, I may change this to lightning:select
    – Shrey
    Jun 19, 2019 at 8:00
  • @Shrey I have updated the code.Please have a check Jun 19, 2019 at 8:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .