JavaScript如何获取select下拉框change事件触发时选中option的name属性

错误原因 #

你当前代码中optionName函数内的this指向的是<select>元素本身，而非选中的<option>子元素，所以无法获取到你绑定在option上的name属性值。

修复代码 #

只需修改optionName函数的逻辑，先获取当前选中的option节点再读取属性即可：

function optionName(e) {
    // 获取当前选中的option元素
    const selectedOption = this.options[this.selectedIndex];
    // 读取option上的自定义name属性
    const name = selectedOption.getAttribute('name');
    console.log(name);
}

优化建议 #

按照HTML原生规范，<option>标签本身支持value属性存储自定义值，不需要额外自定义name属性，调整后代码更简洁：

1. 调整option生成逻辑：

for (var i = 0; i < provinces.length; i++) {
    var node = document.createElement("option");
    var textnode = document.createTextNode(provinces[i].name);
    node.appendChild(textnode);
    // 用原生value属性存储省份id
    node.value = provinces[i].id;
    document.getElementById("provinses").appendChild(node);
}

2. 此时change事件可直接读取select元素的value属性，无需额外获取option节点：

function optionName(e) {
    console.log(this.value); // 直接输出选中省份的id
}

额外提示：你当前的<select>标签name属性为空，如果需要表单提交时把选中的省份值传到Django后端，记得给select补充name属性，比如<select name="province_id" id="provinses">，后端即可通过request.POST.get('province_id')获取提交的省份id。

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