select动态取值 option数据回显

最新推荐文章于 2022-10-08 17:02:29 发布

原创最新推荐文章于 2022-10-08 17:02:29 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery

本文介绍了如何利用Ajax异步请求动态加载select选项，并结合jQuery实现已选值的回显。通过示例代码展示了解决方案，包括从服务器获取数据、填充select元素以及在页面加载时检查并设置初始选中状态。

 <div class="form-group">
                <label class="col-sm-3 control-label">默认通知部门ID：</label>
                <div class="col-sm-8">
                  <input th:field="*{deptId}" id="deptIdHideInp" type="hidden">
                  <select id="deptId" class="form-control select2 select2-multiple" multiple>
                        <option value=""></option>
                    </select>
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 代码生成请选择字典属性</span>
                </div>
            </div>
            <script>
$.ajax({
 url: '/system/dept/findAll',
 type: 'post',
 dataType: "json",
 success:function(res){
 let value=res;
 let str='';
 for(let i=0;i<value.length;i++){
 str+=`<option value=${value[i].deptid}>${value[i].deptName}</option>`
}
$('#deptId').append(str)

//回显数据
const deptId=$('#deptIdHideInp').val()
let optionStr='';
for(let i=0;i<value.lenght;i++){
if(value[i].deptId==deptId){
optionStr+=`<option selected value="${value[i].deptd}">${value[i].deptName}</option>`
}esle{
optionStr+=`<option value="${value[i]}.deptId">${value[i].deptName}</option>`
}
}
$('#deptId').html(optionStr)
}
})
</script>