xxx.value 和 xxx.options[xxx.selectedIndex].value 用 JavaScript 获取所选选项的值有什么区别?

What is the difference between xxx.value and xxx.options[xxx.selectedIndex].value to get the value of selected option with JavaScript?

经过一些研究和测试,我发现这两种方法产生的结果相同。所以我只是想知道之间有什么区别:

function buildUrl() {
  compType = document.querySelector('[name = "c-type"]');
  compTypeValue = compType.value;

}

function buildUrl() {
   compType = document.querySelector('[name = "c-type"]');
   compTypeValue = compType.options[compType.selectedIndex].value;

}
<form id="custom-drop">
  <select name="c-type" id="compressor-type">
    <option value="screw">Screw</option>
    <option value="scroll">Sroll</option>
    <option value="centrifugal">Centrifugal</option>
    <option value="piston">Piston</option>
  </select>
</form>

我确实阅读了与此主题相关的问题 (this and this),但我找不到任何关于它们差异的解释。

select 元素还跟踪当前 selected 项的值和 selected 项的索引。

在您的第一个示例中,您访问了当前 selected 选项的值。 在第二个中,您将获得整个选项元素,该元素位于 selected 的索引位置。 通过访问它的值成员,你然后 return 它的值。

通过这个你得到相同的结果。 但是我认为第二种方法很老套,不考虑这样做。