基于jquery的枚举下拉框

后端返回枚举数据结构：

前端html:

预案级别
  
    
  

主要是在select 标签class上加了enum,以及自定义data-options属性

前端enum.js:

// 枚举下拉框初始化，并把枚举存到自定义枚举容器中
enumStorage = {};
initEnum(enumStorage);

function initEnum(enumStorage) {
    $("select.enum").each(function () {
            let param =  $(this).attr("data-options");
            let enumName = ""+$(this).attr("name")+"";
            let url = param.replace("url:","");
            // console.log(param.replace("url:",""))
            let options = "";
            let itemStorage = {};
            doGet(url,(data)=>{
                $.each(data,function(index,element) {
                    itemStorage[element.code] = element.desc;
                    options += ""+element.desc+"";
                });
                enumStorage[enumName] = itemStorage;
                $(this).html(options);
            });

        }
    )
}

最终图示：

 

最后：如果是像vue,react 组件式的前端框架，可以抽取代码端作为组件，然后页面向组件传参，做成通用的下拉框选择器。