TransWikia.com

ui:input select on change event in lightning

Salesforce Asked by Mayank on December 21, 2020

I have one scenario in which wrapper list is iterating using aura iteration. Inside iteration there is one text field and one dropdown ui:inputselect and ui:inputSelectOption options are also coming dynamically which contains fields.
I want if one value in dropdown is changed, the text field gets changed.

For ex. If I select any date field from dropdown, the text field should be converted and one date picker should appear.

How to get which field is changed because we cannot have dynamic aura:id.

<aura:iteration items="{!v.wrapperList}" var="wrap" indexVar="i">
    <tr>
        <td>C:{!i+1}</td>                           

        <td>
            <ui:inputSelect multiple="false" value="{!wrap.fieldName}" class="form-control">
                <ui:inputSelectOption text="Select Field" label="Select Field" disabled="true" class="form-control"/>
                <aura:iteration items="{!v.objFieldsList}" var="fields">
                    <ui:inputSelectOption text="{!fields}" label="{!fields}" class="form-control"/>
                </aura:iteration>
            </ui:inputSelect>
        </td>

        <td>
            <ui:inputSelect multiple="false" value="{!wrap.opVal}" class="form-control">
                <ui:inputSelectOption value="=" text="EQUALS" label="EQUALS" class="form-control"/>
                <ui:inputSelectOption value="!=" text="NOT EQUALS" label="NOT EQUALS" class="form-control"/>
            </ui:inputSelect>
        </td>

        <td>
            <ui:inputText placeholder="Value" value="{!wrap.fieldVal}" class="form-control" required="true"/>
        </td>

    </tr>
</aura:iteration>

2 Answers

We use a simple workaround when detecting change events on specific rows. Assign a data attribute with the id value you are interested in to the closest HTML element (in your case the td). Then, in your event handler walk through the event.path array until you get to your td and pull the id out of the dataset.

Answered by dsharrison on December 21, 2020

You can use the change attribute and invoke a function from your controller like this:

 <ui:inputSelect multiple="false" value="{!wrap.opVal}" class="form-control" change="selectChangeHandler">

Inside your controller, you can hide/display fields using their aura:id attribute

Answered by prashanthkr on December 21, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP