Our Blog

Dropdown in Lightning Web Component (LWC)

Dropdown in Lightning Web Component (LWC)

In this post, I will explain how to create and use the dropdown in the Lightning Web Component.
Lightning-Combobox is an alternative of Lightning: Select Aura Component.

First, let us create a custom dropdown.

lwc-select.html
<template>
    <label for="FieldSelect" class="slds-form-element__label slds-no-flex">
        <abbr title="required" class="slds-required">*</abbr>//in case you want to mark required
        Select Filter Condition
    </label>
    <select class="slds-select" name = "optionSelect" onchange={changeHandler} >
        <option value="OPTION A">OPTION A</option>
        <option value="OPTION B">OPTION B</option>
    </select> 
</template>
lwc-select.js
import { LightningElement, api,track } from 'lwc';
import getFields from '@salesforce/apex/wk_FilterComponent.getFields';
export default class FilterComponent extends LightningElement {
    @track selectedOption;
    changeHandler(event) {
    const field = event.target.name;
    if (field === 'optionSelect') {
        this.selectedOption = event.target.value;
            alert("you have selected : "this.selectedOption);
        } 
    }
}

Alternatively, you can also use standard lightning web component i.e., Lightning Web Component Combobox.

lwc-select.html
<template>
    <lightning-combobox
               name="progress"
               label="Status"
               value={value}
               placeholder="Select Progress"
               options={options}
               onchange={handleChange} >
   </lightning-combobox>
   <p>Selected value is: {value}</p>
</template>
lwc-select.js
import { LightningElement, track } from 'lwc';

export default class ComboboxBasic extends LightningElement {
@track value = 'inProgress';

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

handleChange(event) {
        this.value = event.detail.value;
     }
}

Cross-Site-Scripting Salesforce

 

Leave a Comment

Comments (0)

Please verify that you are not a robot.

css.php