[SalesForce] Lightning-Web-Components Select Option prepopulate value

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}>
                                        {user.User__r.Name}</option>
                                </template>
                            </select>

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

Best Answer

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>

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

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.

Related Topic