[SalesForce] How to get the selected value of a picklist field in lightning combo box using template.getQuerySelector

How to get the selected value of a picklist field in lightning combo box using template.getQuerySelector?.

<lightning-combobox label={firstControllingFieldLabel}
                            name="Controlling Picklist Type"                                 
                            options={optionValuesFirstSet.controlling}
                            onchange={handleControllingFirstChange}
                            placeholder="None" 
                            value={selectedValuesFirstSet.controlling}
                            >
        </lightning-combobox>

For the above code i want to get the value i am selecting from UI using template.getQueryLocator?

i tried using below snippet:

 let typeOfCase = this.template.querySelector("[name='Controlling Picklist Type']");
        console.log('test type of case',typeOfCase);

But does not work. Any help please?

Best Answer

You need to use the data-id attribute instead of the name attribute. You can find an explanation for why name doesn't work here. Also, when you use query selector, you will be returned the whole element. In order to get the value in the combobox, you need to use .value. Checking to make sure an element is returned before calling .value will prevent an error from being thrown.

<lightning-combobox label={firstControllingFieldLabel}
                            data-id="Controlling Picklist Type"                                 
                            options={optionValuesFirstSet.controlling}
                            onchange={handleControllingFirstChange}
                            placeholder="None" 
                            value={selectedValuesFirstSet.controlling}
                            >
        </lightning-combobox>

let combobox = this.template.querySelector("[data-id='Controlling Picklist Type']");
let typeOfCase = combobox ? combobox.value : null;
console.log('test type of case', typeOfCase);

It's unclear what you are trying to accomplish using query selector. Is it possible that you can just use the value variable? The variable can be set in your onchange event handler. See this example in the combobox documentation.

Related Solutions

[SalesForce] Callback function in LWC

I think that you can wire a function rather than a var as the result of fetchL2PropertyValues.

This means it's basically a callback where you can set values and run your other logic.

So you'd write it like:

@wire(fetchL2ProductValues,{productId: '$l1SavedValue',userType: '$userType'})
l2ProductValuesCallback({ error, data }) {
    if (data) {
       this.l2ProductList = data;
        //do all the logic you wanted to run in the callback... 
       var key,count =0;
       for(key in this.l2ProductList){
         if(this.l2ProductList.hasOwnProperty(key)){
           count++;
         }
       }
       if(count > 0){
           this.showProductL2 = true;
       }else{
           this.showProductL2 = false;
       }

    } else if (error) {
        //handle your error
    }
}

Also... that logic seems like it could be simplified - try investigating array.some() which iterates until a condition evaluates to true. Depends on the data structure of your list that you are returning.

[SalesForce] Pick List values added dynamically in Java Script are not reflecting in Lightning:combobox LWC

Push won't show the new changes to a @track attribute. You need to actually assign a new value to the @track attribute. Here is a demo I wrote for you.

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    @track optionList = [{label:'-- none --',value:''}];
    @track value;
    newValue;
    newLabel;
    setNewValue(event) {
        this.newValue = event.target.value;
    }
    setNewLabel(event) {
        this.newLabel = event.target.value;
    }
    addNewOption() {
        this.optionList = [...this.optionList, {label: this.newLabel+'', value: this.newValue+''}];
        this.newValue = '';
        this.newLabel = '';
        if(this.optionList.length===1) {
            this.value = this.optionList[0].value;
        }
    }
}

<template>
    <lightning-input
        label="New Value"
        name="new-value"
        onchange={setNewValue}>
    </lightning-input>
    <lightning-input
        label="New Label"
        name="new-label"
        onchange={setNewLabel}>
    </lightning-input>
    <lightning-button label="Add" onclick={addNewOption}>
    </lightning-button>
    <hr></hr>
    <lightning-combobox 
        label="Choose One"
        name="options"
        placeholder="Choose One"
        options={optionList}
        value={value}>
    </lightning-combobox>
</template>

Here, we use the spread syntax to copy the array (...this.optionList) and add the new element. This allows us to trip the @track decorator and allow the UI to update.

Best Answer

Related Solutions

[SalesForce] Callback function in LWC

[SalesForce] Pick List values added dynamically in Java Script are not reflecting in Lightning:combobox LWC

Related Topic