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
