从 Javascript 的下拉菜单中访问值？

Question

So I have a dropdown menu that starts default with no value, so the element looks like this:

<div class="jss213">
  <div class="jss214 jss217 jss243 jss228" aria-pressed="false" role="button" aria-haspopup="true" tabindex="0">Basketball
  </div>
  <input type="hidden" value>
  <svg class="jss86 jss219" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M7 10l5 5 5-5z"></path></svg>
</div>

But when the value is selected, this is how the element looks, with the input value = "Basketball":

<div class="jss213">
  <div class="jss214 jss217 jss243 jss228" aria-pressed="false" role="button" aria-haspopup="true" tabindex="0">Basketball
  </div>
  <input type="hidden" value="Basketball">
  <svg class="jss86 jss219" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M7 10l5 5 5-5z"></path></svg>
</div>

I also get the same output when logging the element with this:

console.log(root.getElementsByClassName("jss213"))

I'm trying to access the "value" field using this:

var serviceName = root.getElementsByClassName("jss213").value

This, however, causes the page to crash with the error "TypeError: Cannot read property 'value' of undefined". Is there a way to check for this value without causing an undefined error? Or a way to make sure that the dropdown has properly selected a value before selecting it?

Answer 1

try using

var serviceName = root.querySelector(".jss213 input")?.value

the? checks if the element with the class jss213 has an input field with a possible value it either returns "" or the value "basketball" or whatever the value is set to