基于jquery的枚举下拉框

后端返回枚举数据结构：

前端html:

<label for="planGrade">预案级别</label> <select class="form-control enum" id="planGrade" name="planGrade" data-options="url:/manage/enum/getPlanGradeEnum"> <!-- <option value="1">当前在线</option> <option value="0">已下架</option>--> </select> </div>

主要是在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 += "<option value="+element.code+">"+element.desc+"</option>"; }); enumStorage[enumName] = itemStorage; $(this).html(options); }); } ) }

最终图示：

 

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