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+='
'
                    +'' 
                    +''+cold['attr_name']+'：'
                    +''
                    for(var j = 0 ; j'+colds['text']+''
                        +''                        
                    }
                    str+='
'

                }else if(cold['attr_type'] == '2'){//多选
                    str+='
'
                    +''
                    +''+cold['attr_name']+'：'
                    +''
                    for(var j = 0 ; j'+colds['text']+''
                        +''                        
                    }                    
                    str+='
'
                                                   
                }else if(cold['attr_type'] == '3'){//文本框
                    str+='
'
                    +''
                    +''+cold['attr_name']+'：'
                    +''
                    +'
'
                                                  
                }else if(cold['attr_type'] == '4'){//下拉框
                //图二中，这里创建多个下拉框；重点这data-setmeal这个属性上，把数据遍历到这个属性中
						     var strpp='';
						    for(var j = 0 ; j'
						            +''
						            +''+cold['attr_name']+'：'
						            +''
						            +''
						            +'

' +'

' } } $('.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

重点描述

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