mui:动态创建多个picker组件

因开发需求升级，需要动态创建多个picker组件;
功能需求
1.图一

2.图二

//点击产品分类，出现下拉框
   $("#distributArea").on("tap", function () {
        setTimeout(function () {
            distributArea.show(function (items) {

                $("#distributArea").val((items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text);
                $("#cate_name").val((items[2]).text);
                $("#cate_id").val((items[2]).id); 

                //调取分类属性
                getAttribute((items[2]).id);             
                          
            });
        }, 200);
    });  
   //产品分类属性（这里就是图一中选择好参数后，会调用到的数据）
    function getAttribute(cate_id)
    {
        var data = {
            cate_id:cate_id,
        };
        $.getJSON('/h5/trade/product/attribute', data, function (info) {
            
            var str='';
            var datas = info.content;
            console.log(datas);
            /*if(datas.length == 0){
                mui('#trunkList').pullRefresh().endPullupToRefresh(true);
            }else{
                mui('#trunkList').pullRefresh().endPullupToRefresh(false);
            }*/
            for (var i = 0; i < datas.length; i++) {
                cold = datas[i];
                if(cold['attr_type'] == '1'){ //单选
                    str+='<div class="mui-clearfix mttb1">'
                    +'<i class="mui-pull-left xingNone"></i>' 
                    +'<span class="moreCheck">'+cold['attr_name']+'：'
                    +'<em class="mui-pull-right wd4zi73">'
                    for(var j = 0 ; j<datas[i].chiild.length; j++){
                         colds = cold.chiild[j];
                        str+='<i><input type="radio" name="LadderQuotation" class="field-radio field-radiof88106 zicon" checked="">'
                        +'<em>'+colds['text']+'</em>'
                        +'</i>'                        
                    }
                    str+='</em></span></div>'

                }else if(cold['attr_type'] == '2'){//多选
                    str+='<div class="mui-clearfix mttb1">'
                    +'<i class="mui-pull-left xingNone"></i>'
                    +'<span class="moreCheck">'+cold['attr_name']+'：'
                    +'<em class="mui-pull-right wd4zi73">'
                    for(var j = 0 ; j<datas[i].chiild.length; j++){
                        colds = cold.chiild[j];
                        str+='<i><input type="checkbox" name="LadderQuotation" class="field-check field-checkf88106 zicon" checked="">'
                        +'<em>'+colds['text']+'</em>'
                        +'</i>'                        
                    }                    
                    str+='</em></span></div>'
                                                   
                }else if(cold['attr_type'] == '3'){//文本框
                    str+='<div class="mui-clearfix mttb1">'
                    +'<i class="mui-pull-left xingNone"></i>'
                    +'<span>'+cold['attr_name']+'：<em class="mui-pull-right wd6zi65">'
                    +'<input class="formInput " type="text" placeholder="">'
                    +'</em></span></div>'
                                                  
                }else if(cold['attr_type'] == '4'){//下拉框
                //图二中，这里创建多个下拉框；重点这data-setmeal这个属性上，把数据遍历到这个属性中
						     var strpp='';
						    for(var j = 0 ; j<cold.chiild.length; j++){
						        var proDart=cold.chiild[j].text;
						        strpp+=proDart+',';
						    }
						    strpp=(strpp.substring(strpp.length-1)==',')?strpp.substring(0,strpp.length-1):strpp;
						    str+='<div class="selectBox">'
						            +'<div class="mui-clearfix mttb1 pr">'
						            +'<i class="mui-pull-left xingNone"></i>'
						            +'<span>'+cold['attr_name']+'：<em class="mui-pull-right wd6zi65">'
						            +'<input id="dropdown" class="formInput userResult dropdown" data-setmeal="'+strpp+'" type="text" placeholder="" "this.blur()"readonly="readonly">'
						            +'<img class="trDownImg" src="../themes/cool/trade/img/public/[email protected]" alt="">'
						            +'</em></span></div>'
						            +'</div>'

                }
                                                                               
            }            
            $('.attribute').append(str);

        });                
    }

//当点击每个下拉框的时候，将data-setmeal属性值取出，并放入picker.setData数据中，就能每点击一次，即可在创建一个新的下拉框，并有相应的数据
   $(document).on('tap','#dropdown',function () {
		    var that = $(this);
		    var that_values = that.attr("data-setmeal");
		    var oldArr = that_values.split(",");
		    var newArr = [];
		    var picker = new mui.PopPicker();
		    for(var i=0,length=oldArr.length;i<length;i++){
		    //这里是转换成picker能用的数据格式
		        newArr.push({value:oldArr[i],text:oldArr[i]});
		    }
		    picker.setData(newArr);
		    picker.show(function(items) {
		        that.val(items[0].value);
		    
		})
});

重点描述

1.这个效果为多级联动，每一个联动都有很多动态属性。
2.这里创建多个下拉框；重点这data-setmeal这个属性上，把数据遍历到这个属性中；
3.当点击每个下拉框的时候，将data-setmeal属性值取出，并放入picker.setData数据中，就能每点击一次，即可在创建一个新的下拉框，并有相应的数据
4.这里没有上html代码，页面不复杂，主要是比较乱。这种数据效果，还是看js比较方便