0

I have a component having multiple values.The multiple values are coming properly in the input text box. I want to show the values selected from the list as lightning pills.

My Component Code is :-

<aura:attribute name="picklistOptsList" type="String[]"/>

<ui:inputSelect multiple="true" 
                class="multiple"
                aura:id="InputSelectMultiple" 
                change="{!c.onMultiSelectChange}" value="">

    <ui:inputSelectOption text="Any"/>
    <ui:inputSelectOption text="Open"/>
    <ui:inputSelectOption text="Closed"/>
    <ui:inputSelectOption text="Closed Won"/>
    <ui:inputSelectOption text="Prospecting"/>
    <ui:inputSelectOption text="Qualification"/>
    <ui:inputSelectOption text="Needs Analysis"/>
    <ui:inputSelectOption text="Closed Lost"/>

</ui:inputSelect> 

<ui:inputText class="result" aura:id="multiResult" value="{!v.picklistOptsList}" />

My Controller Code is :-

onMultiSelectChange: function(component, event) {
    debugger;
    var selectedValue= event.getSource().get("v.value");
    component.set("v.picklistOptsList", selectedValue); 
    console.log('you selected :'+selectedValue);
 },
0

First you have to split the selected values by semicolon in the controller (before assigning them to attribute) then you can use aura:iteration to create the lightning:pill s.

Component Markup

<aura:component >
    <aura:attribute name="picklistOptsList" type="String[]"/>
    <ui:inputSelect multiple="true" 
                    class="multiple"
                    aura:id="InputSelectMultiple" 
                    change="{!c.onMultiSelectChange}" value="">

        <ui:inputSelectOption text="Any"/>
        <ui:inputSelectOption text="Open"/>
        <ui:inputSelectOption text="Closed"/>
        <ui:inputSelectOption text="Closed Won"/>
        <ui:inputSelectOption text="Prospecting"/>
        <ui:inputSelectOption text="Qualification"/>
        <ui:inputSelectOption text="Needs Analysis"/>
        <ui:inputSelectOption text="Closed Lost"/>
    </ui:inputSelect>
    <br></br>
    <ui:inputText class="result" aura:id="multiResult" value="{!v.picklistOptsList}" />
    <br></br>
    <ul class="slds-listbox slds-listbox_inline slds-p-top_xxx-small" role="group" aria-label="Inputted Options:">
        <aura:iteration items="{!v.picklistOptsList}" var="sr">
            <li role="presentation" class="slds-listbox__item">
                <lightning:pill class="slds-m-around_xx-small" label="{!sr}"/>
            </li>
        </aura:iteration>
    </ul>
</aura:component>

Client Controller

({
    onMultiSelectChange: function(component, event) {
        debugger;
        var selectedValue= event.getSource().get("v.value");
        var str_array = selectedValue.split(';');
        component.set("v.picklistOptsList", str_array); 
        console.log('you selected :'+selectedValue);
    }
})

Screenshot

enter image description here

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.