jquery field jquery field 枚举

后端返回枚举数据结构：

前端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 组件式的前端框架，可以抽取代码端作为组件，然后页面向组件传参，做成通用的下拉框选择器。