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. – Dhanik Lal Sahni Jun 19 '19 at 7:31
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 '19 at 8:00
  • @Shrey I have updated the code.Please have a check – sanket kumar Jun 19 '19 at 8:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.