xxx.value 和 xxx.options[xxx.selectedIndex].value 有啥区别来使用 JavaScript 获取选定选项的值？

Posted 2023-02-18

【中文标题】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?xxx.value 和 xxx.options[xxx.selectedIndex].value 有什么区别来使用 JavaScript 获取选定选项的值？

【发布时间】：2022-01-09 03:37:58

【问题描述】：

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

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 和 this），但我找不到任何关于它们差异的解释。

【参考方案1】：

select 元素跟踪当前选定项的值和选定项的索引。

在您的第一个示例中，您访问当前选定选项的值。 在第二个中，您将获得整个选项元素，该元素位于所选索引位置处。 通过访问它的值成员，您可以返回它的值。

这样你会得到同样的结果。 但是我会称第二种方法很hacky，不考虑这样做。