I have created a custom lightning page using Lightning web components, having a custom picklist in it, and I am trying to populate the values in the custom picklist on the click of the custom lookup field 'Project'. The custom picklist should hold the values of a custom object 'Unit'. Project and Unit is in a Master-detail relationship.


          <p class="slds-var-p-horizontal_small">

            <lightning-record-edit-form object-api-name="Price__c">
            <lightning-input-field field-name="Project__c" onchange={projectChange}>
   <select class="slds-select" >
      <option value="Select">Select</option>
      <template for:each={options} for:item="option">
          <option key={option.label} class="uiInputSelectOption" value={option.value}>{option.value}</option>


import { LightningElement , wire, track} from 'lwc';
import getUnit from '@salesforce/apex/PriceFetch.getUnit';
export default class PriceScreen extends LightningElement {
 @track options;

    projectChange(event) {
      this.projSelected = event.detail.value[0];

       getUnit({ projId:this.projSelected })

       .then(result => {
        this.options = result;


       .catch(error => {
        this.options = undefined;




public with sharing class PriceFetch {
   @AuraEnabled(cacheable = true)
    public static List<Unit__c> getUnit(Id projId) {
        return [SELECT Id,  Name FROM Unit__c where Project__c = :projId ];

Is there any mistake in my code? Please help me

  • Please edit your question and format the code using { } button Sep 29, 2020 at 8:49

1 Answer 1


The line

<option key={option.label} class="uiInputSelectOption" value={option.value}>{option.value}</option>

will work only if you are that structure from Apex or are manipulating it in JavaScript.

The correct way looking at you code would be

<option key={option.Id} class="uiInputSelectOption" value={option.Id}>{option.Name}</option>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .