How i can get the label of the selected value in Combobox - Lightning Web Components?

Question

I'm developing a LWC Combobox and I want to get the label of the selected value in the handleChange() method, not the id. I filled the combobox with JSON Items in this form :

{value :'Id', label:'Label'}

I used this in JS : event.detail.value but it gives the id not the Label.

Answer 1

You do not have direct way of getting label (as you get only selected value in event.detail). You need to depend on all options (simply get it from event.target) and filter based on selected value. You can use below:

JS:

@track selectedLabel;

get options() {
    return [
        { label: 'New', value: 'new' },
        { label: 'In Progress', value: 'inProgress' },
        { label: 'Finished', value: 'finished' },
    ];
}

handleChange(event) {
    this.selectedLabel = event.target.options.find(opt => opt.value === event.detail.value).label;
}

HTML:

<lightning-combobox name="progress"
                        label="Status"
                        placeholder="Select Progress"
                        options={options}
                        onchange={handleChange}></lightning-combobox>

    <p>Selected label is: {selectedLabel}</p>

Answer 2

Another way to get the label, iterate with options and match the value to find the label.

   statusOptions = [
        {value: 'new', label: 'New'},
        {value: 'in-progress', label: 'In Progress'},
        {value: 'finished', label: 'Finished'}
    ];

    handleChange(event) {
        const selectedOption = event.detail.value;
        var currentLabel =  this.statusOptions.filter(function(option) {
                               return option.value == selectedOption;
                            })
        if(currentLabel)
          //get the label
          console.log(currentLabel[0].label)

    }