HTML(使用了layui)
<div class="layui-form-item" style="margin-top: 15px" >
<select name="typeid" lay-filter="typeid" id="projectType">
<!--<option v-for="projectType in projectTypeList" :key="projectType.id" :id="projectType.id" v-text="projectType.name">-->
<!--</option>-->
</select>
</div>
后台返回的json格式
{
"success": true,
"msg": "查询项目分类成功",
"data": [
{
"id": 1,
"name": "校庆基金"
},
{
"id": 2,
"name": "教学设施"
},
{
"id": 3,
"name": "公益慈善"
},
{
"id": 4,
"name": "人才培养"
},
{
"id": 5,
"name": "实验室建设"
}
],
"code": 0,
"count": 5
}
渲染数据的js(使用了layui)
$(function () {
layui.use(['form','layer'], function() {
var form = layui.form;
var layer = layui.layer;//弹层
selectRoleName();
})
})
function selectRoleName(){
$.ajax({
type:'POST',
url:'/projecttype/queryTypeList',
dataType:"json",
success: function(data){
if(data.success){
var add=document.getElementById("projectType");
for(var i=0;i<data.data.length;i++){
var option=document.createElement("option");
option.id=data.data[i].id;
option.innerText=data.data[i].name;
add.append(option);
layui.form.render('select')
}
}else{
layer.msg('暂时没有分类,请新建项目分类')
}
}
});
}
修改页面回显分类的js(用到了jquery)
//判断是添加页面还是修改页面
var isUpdateHtml=parseUrl();
if(isUpdateHtml){
//获取项目id
var id = getQueryVariable("projectId");
//回显项目分类
huixian();
function huixian(){
$.ajax({
type: "post",
url: "/project/queryProjectByIdToProtal",
data:{
id : id
},
success: function(result){
if(result.success){
//回显项目分类
$("#"+String(result.data.typeid)).prop("selected",true);
form.render();
}
},
error:function () {
}
});
}
}