2

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

Improve this question

1 Answer 1

Reset to default
2

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.

Improve this answer
2
  • 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.. Commented 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 Commented Mar 30, 2019 at 16:05

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.