项目场景：
今天在做毕设的时候有踩坑了，真的是每天不愁博客写呢。
问题描述：
我想把数据绑定到下拉框，并且如果存在鲜花商品Id，下拉框自动赋值。
存在该Id时选择该选项。
但是结果总是
我一开始用了最基础的jQuery的赋值方法 在文档加载完毕的时候将下拉框选中该鲜花商品的选项，但是不能成功，代码如下：
$(function () {
var id=getQueryVariable("id");
if(id>=0){
$.post("/admin/carousel/findById", {
id: id}, function (result) {
if (result.success) {
var carousel = result.carousel;
$("#flowersId").find("option[value="+carousel.flowers.id+"]").prop("selected",true);
$("#orderNo").val(carousel.sort);
$("#id").val(id);
if (carousel.imageName != null && carousel.imageName != '') {
$("#img").attr('src', '/carouselImages/' + carousel.imageName);
} else {
$("#img").css("display", "none")
}
}
})
}else {
$("#img").css("display","none")
}
})
然后我运用了文档的渎职方法，结果只能成功一次，刷新页面之后还是老样子
$.post("/admin/carousel/findById", {
id: id}, function (result) {
if (result.success) {
var carousel = result.carousel;
form.val('example', {
"orderNo": carousel.sort // "name": "value"
, "id": carousel.id
, "selectId": carousel.flowers.id
});
//更新全部a
alert(carousel.flowers.id);
layui.form.render();
/* //重新渲染 固定写法
layui.form.render("select");*/
if (carousel.imageName != null && carousel.imageName != '') {
$("#img").attr('src', '/carouselImages/' + carousel.imageName);
} else {
$("#img").css("display", "none")
}
}
})
我真的怀疑人生。。
原因分析：
后来 我借鉴了我的老师java1234小峰的方法分析出了原因
没有他 我估计好几天都出不来
没有使用Promise.all方法
在下拉框选项所有都加载完毕后，在选择下拉框
Promise它通常在启动多个异步任务并发运行并为其结果创建承诺之后使用，以便人们可以等待所有任务完成。
var p1 = Promise.resolve(1);
var p2 = Promise.resolve(2);
var p3 = Promise.resolve(3);//
Promise.all([p1, p2, p3]).then(function(results){
console.log(results);
});
解决方案：
在Promise.all([])下 给select加载下拉框数据 数据加载完毕和在寻找id 动态选中下拉框 代码如下 Promise.all([
//检查项目添加到下拉框中
$.post("/admin/flowers/list",{
},function (result) {
if(result.success){
var flowersList=result.data;
$('#flowersId').append(" <option value='-1'>请选择相应鲜花</option>");
$.each(flowersList, function (index, item) {
/*item.id+" "+item.title*/
$('#flowersId').append("<option value='" + item.id + "'>" + item.id+" "+item.title + "</option>");// 下拉菜单里添加元素
});
//重新渲染 固定写法
layui.form.render("select");
}
})
]).then(function (results) {
var id = getQueryVariable("id");
if (id)
$.post("/admin/carousel/findById", {
id: id}, function (result) {
if (result.success) {
var carousel = result.carousel;
console.log(carousel.flowers.id);
console.log($("#flowersId").find("option[value=" + carousel.flowers.id + "]"));
$("#flowersId").find("option[value=" + carousel.flowers.id + "]").prop("selected", true);
layui.form.render("select");
} else {
layer.alert("服务器加载有问题，请联系管理员！");
}
}, "json");
})