Let's say I have a Lightning-Web-Component with a select list with dynamic options where the value is a user Id and the label is the user's name:

<select class="slds-select" onchange={handleSelectChange} disabled={isDisabled} 
                         data-value={step.selectedUser} >
                                <option value="">--None--</option>
                                <template for:each={step.approvalTemplateStep.Approval_Step_Users__r} for:item="user">
                                    <option key={user.key} value={user.User__c}>

How do I prepopulate the select option with a value? I have the value I want to be prepopulated in the variable called step.selectedUser.

Here's what I see on page load: enter image description here

Here's what I should see: enter image description here

1 Answer 1


you can declare a 'hasDefault' getter in your controller and in your template, if:true, render a default result option:

    <template if:true={bears.data}>
            <div class="slds-m-around_medium">

                <select class="slds-select" onchange={handleBearView} >

                         <!-- HERE Check for default value -->
                        <template if:true={hasDefaultResults}> 
                            <option value={hasDefaultResults.Id}>{hasDefaultResults.Name}</option>

                       <template  for:each={bears.data} for:item="bear">
                            <option key={bear.Id} value={bear.Id} >{bear.Name}</option>

and create a getter:

get hasDefaultResults() {
        //check if array has data
        if(this.bears.data.length > 0){
              //here as an example, i set the second element from 
              //the array as the default, this can be whatever you want
            return (this.bears.data[1]);

enter image description here

Note: this will generate a duplicate value, so, you will have to figure out a way to exclude it from your original array, either in the template or in your controller.

  • Unfortunately, this select list in an iteration, so using a javascript var with a custom getter won't work since expressions cannot be passed into the function. I also really don't like the duplicative value. there must be a way to use javascript to manipulate the dom to set the selected attribute of the option which matches. I am still trying to figure this one out.. Mar 30, 2019 at 16:03
  • 1
    well, you can also create a design attribute, expose it, and there set a "value" as default, then in your array, if value matches anything in your array, re-order it and render
    – glls
    Mar 30, 2019 at 16:05

You must log in to answer this question.

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