1

I am trying to default the value of the select to a specific value based on a condition so I cannot just put selected in the html. I need JS code that will automatically update it. For this though I just need to know how to default the value in JS not html for female

Here is the html:

<template>
 

<div class="nds-col nds-size_12-of-12 nds-medium-size_12-of-12 nds-large-size_12-of-12">
  <div class="nds-col nds-size_12-of-12">
     <div class="nds-form-element nds-form-container"> 
        <div class="nds-form-element__control nds-form-element__control-animated-label">
           <div class="nds-select_container">
            <select class="nds-select nds-has-value" name="genderfield" required onchange={handleChange}>
            <option value="male">Male</option>
            <option value="female">Female</option>
            </select>
            <label class="nds-form-element__label" for="select-01">Gender</label>
           </div>
        </div>
     </div>
  </div>

Here is my js right now but it isnt working:

import { LightningElement, api, track } from 'lwc';
import omniscriptSelect from "vlocity_ins/omniscriptSelect";
import template from './selectOverrideGenderOption2.html';
import pubsub from 'vlocity_ins/pubsub';
import { OmniscriptBaseMixin } from 'vlocity_ins/omniscriptBaseMixin';

export default class SelectOverrideGenderOption2 extends OmniscriptBaseMixin(omniscriptSelect) {
    
    /**
     * This method is overriden as part of example for clearing the value if we delete the data from the field and the field is Required
     * The OOTB behaviour - This is intentionally done, we are keeping last successfully entered value to avoid loss of data
     * @param {*} evt 
     */
     connectedCallback() {
        setTimeout(() =>
          this.template.querySelector('[name="genderfield"]').selectedIndex = 1
        );
      }

    handleChange(evt) {
        
        
        if(evt.target.value === "") {
            
            this.applyCallResp(evt.target.value);
            Promise.resolve().then(() => { 
                this.setElementValue(null, false, true);
                this.dispatchOmniEventUtil(this, this.createAggregateNode(), 'omniaggregate');
            });
        } else {
           
            this.applyCallResp(evt.target.value);
        }
    }   

    render() {
        
        return template;
    }
}
2

The default HTMLSelectElement doesn't use "value" to set a value, it uses selectedIndex.

Also, during connectedCallback, the template hasn't yet been rendered. Add an asynchronous callback, and you should be fine:

setTimeout(() =>
  this.template.querySelector(someCssSelector).selectedIndex = 1
);

In addition, you cannot reliably use Id values in LWC, so set the name attribute instead:

<div class="nds-select_container">
    <select class="nds-select nds-has-value" name="genderfield" required onchange={handleChange}>
    <option value="male">Male</option>
    <option value="female">Female</option>
    </select>
    <label class="nds-form-element__label" for="select-01">Gender</label>
</div>

  connectedCallback() {
    setTimeout(() =>
      this.template.querySelector('[name="genderfield"]').selectedIndex = 1
    );
  }

Demo Code

1
  • I put it in the render and it worked, Thank you very much! Jul 12 at 15:23

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.