Suppose I have a select tag like below and I want to update its value through any attribute in javascript, then how can I achieve it because document.getElementById will not work in the lightning Web Components
<select id="demoSel" name="demoSel"> 3
- 5Does this answer your question? How do you define an element with an ID attribute using LWC?Przemysław Długoszewski-Tamoń– Przemysław Długoszewski-Tamoń2021-07-01 08:33:16 +00:00Commented Jul 1, 2021 at 8:33
- @PrzemysławTamoń I could not set the value using the dataset property aswell. I wanted to set the value of the element in js side only. Also not on the particular event of the target but on the any event.mukhtar alam– mukhtar alam2021-07-01 13:24:13 +00:00Commented Jul 1, 2021 at 13:24
- @PrzemysławTamoń I have to update the select tag in the connected call back which I was facing challenge.mukhtar alam– mukhtar alam2021-07-02 05:24:33 +00:00Commented Jul 2, 2021 at 5:24
Add a comment |
2 Answers
In order to access element in LWC you need to use
this.template.querySelector();
You cannot use ID in the above as the the IDs are generated dynamically when the component is rendered. But you can use other selectors namely the class and data-* attributes. For example if you add the class = "selectclass" to your select element, you can access it using
this.template.querySelector(".selectclass");
LWC reference for the above is at
- can I use like this.template.querySelector(".selectclass").value = "somevalue" because I want to set the value through js side.mukhtar alam– mukhtar alam2021-07-01 13:20:04 +00:00Commented Jul 1, 2021 at 13:20
- It should work or instead of value attribute, use selectedIndex attribute. I am not sure of the your usecase but instead of select, it might be better to use lightning-combobox component.Rajiv– Rajiv2021-07-01 14:27:06 +00:00Commented Jul 1, 2021 at 14:27
- I have to update the select tag in the connected call back which I was facing challenge.mukhtar alam– mukhtar alam2021-07-02 05:26:17 +00:00Commented Jul 2, 2021 at 5:26
the above link answered my question. To be specific I had to use conditional rendering inside the option tag just like this:
<option if:false={getSelectedOption}> and use getSelectedOption as getter in which particular object of the array is returned which has to be selected.