使用JavaScript无法获取HTML表单select选项自定义属性modelcode的值

你可以先定位到当前选中的<option>节点，再读取节点上的自定义属性，具体实现逻辑如下： #

基础实现方案（全浏览器兼容） #

// 获取select元素
const modelSelect = document.getElementById('Modeles');
// 拿到当前选中的option节点
const selectedOpt = modelSelect.options[modelSelect.selectedIndex];
// 读取modelcode自定义属性
const modelcode = selectedOpt.getAttribute('modelcode');

如果选中的是第二个值为01、展示文本为B的选项，上述代码得到的modelcode值就是B。 #

符合HTML标准的优化方案 #

建议你将自定义属性加上data-前缀，符合HTML5自定义属性规范，也可以避免和原生DOM属性冲突：
修改后的HTML代码如下：

<select class="login-input" name="Modeles" id="Modeles">
    <option value="">--- Code modele ---</option>
    <option value="00" data-modelcode="A">A</option>
    <option value="01" data-modelcode="B">B</option>
    <option value="03" data-modelcode="C">C</option>
</select>

此时可以通过dataset属性更便捷地读取属性值：

const modelSelect = document.getElementById('Modeles');
const selectedOpt = modelSelect.options[modelSelect.selectedIndex];
const modelcode = selectedOpt.dataset.modelcode;

异常处理补充 #

可以加判断逻辑避免未选中有效选项时返回空值影响后续逻辑：

const modelSelect = document.getElementById('Modeles');
// 第一个是占位选项的情况可以直接判断索引大于0
if (modelSelect.selectedIndex > 0) {
  const selectedOpt = modelSelect.options[modelSelect.selectedIndex];
  const modelcode = selectedOpt.getAttribute('modelcode');
  // 后续业务逻辑
}

内容的提问来源于stack exchange，提问作者Megalf