如何从分配给不同 JavaScript 变量的单个选项选择中获取多个数据属性？

Question

我正在尝试从下拉菜单中的多个数据属性分配 2 个不同的 javascript 变量值。一个值工作正常，另一个值一直返回 null。任何建议将不胜感激！

html 表单中的选项行示例：

<select onchange="calculateNPF()" id="yourCamera" name="yourCamera" class="form-control">

<option value="79" data-sensor-width="36" data-sensor-height="24" data-cropFactor="1" data-pixelPitch="6.6" data-resolution="20.1">Canon EOS R6</option>

let yourCameraPixelSize = document.getElementById('yourCamera');
let pixelSize = yourCameraPixelSize.getAttribute('data-pixelPitch');
let yourCameraSensorSize = document.getElementById('yourCamera');
let sensorSize = yourCameraSensorSize.getAttribute('data-cropFactor');

在上面的代码中“pixelSize”工作正常，而sensorSize返回null

Answer 1

您尝试从

select

元素获取属性值，但它们位于

option

元素上。

如果您尝试从所选选项中获取这些属性值，并且它是单选

select

元素，则可以使用

.selectedOptions[0]

:

function calculateNPF() {
    const yourCamera = document.getElementById("yourCamera");
    const selectedOption = yourCamera.selectedOptions[0];
    const yourCameraPixelSize = selectedOption.getAttribute('data-pixelPitch');
    const yourCameraSensorSize = selectedOption.getAttribute('data-cropFactor');
    console.log(`yourCameraPixelSize = ${yourCameraPixelSize}`);
    console.log(`yourCameraSensorSize = ${yourCameraSensorSize}`);
}

<select onchange="calculateNPF()" id="yourCamera" name="yourCamera" class="form-control">
  <option>Choose an option</option>
  <option value="79" data-sensor-width="36" data-sensor-height="24" data-cropFactor="1" data-pixelPitch="6.6" data-resolution="20.1">Canon EOS R6</option>
</select>

我应该注意到，名称

yourCameraSensorSize

与属性名称

data-cropFactor

并不真正匹配。