function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Karan KeharKaran Kehar 

Fire Event when you select a value in the selectedvalues list in duallistbox

Hi,

I have created a lightning component which has a lightning:duallistbox in it.Now when I select a value on the selected values list on the right side, I want a modal to be displayed which shows some sort of details of the selected value.
User-added imageFor example, in the above image when I select "test Redpath Sugar", I want to open a modal which shows some details of the selected entity. I have tried document.getElementsByClassName("slds-is-selected") which is returning array of 0 length.

Has anyone trying to achive this ? Any help would be greatly appreciated.

Thanks,
Karan
Raj VakatiRaj Vakati
You can use the onchange of the duallistbox or you can use values options  



A list of default options that are included in the selected options listbox. This list is populated with values from the options attribute.


  
/** Client-Side Controller **/
({
    initialize: function (component, event, helper) {
        var options = [
            { value: "1", label: "Option 1" },
            { value: "2", label: "Option 2" },
            { value: "3", label: "Option 3" },
            { value: "4", label: "Option 4" },
            { value: "5", label: "Option 5" },
            { value: "6", label: "Option 6" },
            { value: "7", label: "Option 7" },
            { value: "8", label: "Option 8" },
        ];
        var values = ["7", "2", "3"];
        var required = ["2", "7"];
        component.set("v.listOptions", options);
        component.set("v.defaultOptions", values);
        component.set("v.requiredOptions", required);
    },
    handleChange: function (cmp, event) {
        // Get the list of the "value" attribute on all the selected options
        var selectedOptionsList = event.getParam("value");
        alert("Options selected: '" + selectedOptionsList + "'");
    }
})

 
Karan KeharKaran Kehar
Hi Raj,

Thanks for the reply, but onchange will fire when I move a value from left to right. But I want some sort of event when I just select(highlighted in blue) a value on the right side list(selected options) and not move it.