mui框架的实例中,下拉都是固定的json格式数据,但是我们实际开发过程中,需要从后来动态获取值,并回显到下拉框,效果如下
<!--状态下拉-->
<input name="scheduleAddr" id="scheduleAddr" value="${addrType}" type="hidden"/>
<input name="dataOrgcode" id="dataOrgcode" value="${dataOrgcode}" type="hidden"/>
<input name="createTime" id="createTime" value="${createTime}" type="hidden"/>
<div class="schAddrType">
<h2 class="mui-content-padded" id="regionPicker">
<span id="typePick">请选择</span>
</h2>
</div>
//定义数据用于存放一级下拉和二级下拉的数据
var list = [];
var addrlist =[];
jsp使用foreach标签进行循环数据体,如果是h5使用for循环,将接口的值遍历循环出来,放进创建的变量里
item 是后台获取的第二级下拉的值,便利循环,放进变量里,因为这里一级下拉对应的二级都是一样,所以在循环第一级下拉的时候,直接房便利好的二级下拉放进去,如果是每个一级下拉都对应不同的二级下拉值,则需要双重for循环,逐个放进去
<c:forEach var="codes" items="${dutyAddrSelectItems}" varStatus="s">
addrlist.push({text: '${codes.selectText}', value: '${codes.selectValue}'});
</c:forEach>
picker.setData(list); 将值放进picker容器里,typePick.addEventListener(‘tap’, function(event) 此方法将获取到的值,放进jsp页面上显示出来。
var typePick = document.getElementById("typePick");
typePick.addEventListener('tap', function(event) {
$(".schAddrType").click(function(){
picker.show(function(selectItems) {
var text1 = selectItems[0].text;
var text2 = selectItems[1].text;
$("#typePick").text( text1 + "-" + text2);
$('#dataOrgcode').val(selectItems[0].value);
$('#scheduleAddr').val(selectItems[1].value);
$('#form1').submit();
})
});
// picker.dispose();
});
- 从后台获取到参数以后,下面是将数据回显到下拉上,
picker.pickers[1].setSelectedindex(0);
括号里的就是下拉值所在的下标,0 就是默认第一个
循环从后台获取的值,如果两值相等,则选中这个下标
var schText = '全部区域';
var addrText = '全部区域';
//回显
picker.pickers[0].setSelectedValue('${dataOrgcode}');
picker.pickers[1].setSelectedindex(0);
for(var i=0;i<list.length;i++){
if(list[i].value==$('#dataOrgcode').val()){
schText = list[i].text;
}
for(var a =0; a < list[i].children.length;a++){
if(list[i].children[a].value == $('#scheduleAddr').val()){
addrText = list[i].children[a].text;
picker.pickers[1].setSelectedindex(a);
}
}
}
typePick.innerText = schText + "-" + addrText;
}
附jsp部分demo,如果框架相同,可以复用:https://download.csdn.net/download/qq_43690135/86457090