元素添加私有属性

dom结构如下:

<select name="title" id="title"></select>

js代码如下:

var titleList = [
    {
        "title":"title1",
        "code":"001",
    },
    {
        "title":"title2",
        "code":"002",
    },
    {
        "title":"title3",
        "code":"003",
    }
];
var title = document.getElementById("title");
function createOption(){
    var optionList = "";
    for(var i=0;i<titleList.length;i++){
        optionList += "<option data-code='"+titleList[i].code+"' value='"+titleList[i].title+"'>"+titleList[i].title+"</option>"
    }
    title.innerHTML = optionList;
};
createOption();
title.onchange = function(e){
    console.log(e.target.value);
    var index = title.selectedIndex ; // selectedIndex代表的是你所选中项的index
    var code = title.options[index].getAttribute("data-code");
    console.log(code)
};

如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。

原文地址:https://www.cnblogs.com/wangzhenyu666/p/8385627.html