二级联动mui客户端下拉赋值及回显

mui框架的实例中，下拉都是固定的json格式数据，但是我们实际开发过程中，需要从后来动态获取值，并回显到下拉框，效果如下

1. 前端以jsp为例：

   由于需要向后台传值，我们采用form表单的方式进行提交，所以，增加input隐藏域，方便后台接收参数，如果是ajax方式传参，可以将参数跟在地址后面，
   默认状态是请选择

		<!--状态下拉-->
		<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>

2. 创建好容器后，进行mui初始化，及动态获取后台参数 首先 var picker = new
   mui.PopPicker();初始化组件，layer里面可以自定义按钮的名称，不定义则是默认的取消和确定

//定义数据用于存放一级下拉和二级下拉的数据
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();
		});

3. 从后台获取到参数以后，下面是将数据回显到下拉上，
   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