Our Blog

Dropdown in Lightning Web Component (LWC)

Dropdown in Lightning Web Component (LWC)

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;
     }
}

Read More:  Cross-Site-Scripting Salesforce

Hire a Salesforce Lightning Developer

 

Leave a Comment

Comments (0)

Please verify that you are not a robot.

Welcome back

Welcome back! Please enter your details

One or more fields have an error. Please check and try again.

Forgot Password?

Tell us about Your Company

How can we help you with your business?