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


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.. – Mitch Spano Mar 30 '19 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 '19 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.