HTML DOM Select not working as expected on lit-html

Asked Oct 26 '20 at 15:27

Active Oct 27 '20 at 12:29

Viewed 437 times

I'm not sure if there's something wrong with my code or it's an existing bug with lit-html?

I'm trying to get value of the selected item when button is clicked.

number.js

<select class="form-control" name="number">
     <option ?selected=${this.number === 1} value="1">One</option>
     <option ?selected=${this.number === 2} value="2">Two</option>
     <option ?selected=${this.number === 3} value="3">Three</option>
</select>
<button type="button" @click=${getSelectedValue}>Get Selected Value</button>


getSelectedValue() {
  const selectOptions = this.querySelector('select[name="number"]');

  const selectedValue = selectOptions.options[selectOptions.selectedIndex].value;
}

I've tried selectOptions.value but I still can't get the selected value.

Note that, I've added createRenderRoot() {return this;} to disable the shadowDOM.

edited Oct 27 '20 at 12:29

asked Oct 26 '20 at 15:27

blitzen12

1,350
3
24
33

Because lit-html and lit-element use the ShadowDOM, you must call this.shadowRoot.querySelector('select[name="number"]'); – Thad Oct 26 '20 at 19:05
Ah sorry, I forgot to mention, I disabled the shadow DOM, I added. `createRenderRoot() {return this}` in it. – blitzen12 Oct 27 '20 at 12:27
What does `selectOptions.selectedOptions` return? – Justin Fagnani Oct 28 '20 at 00:10
It returns the selected options `HTMLCollection [option] 0: option length: 1` – blitzen12 Oct 29 '20 at 09:38

HTML DOM Select not working as expected on lit-html

0 Answers0