如何使用外部插件picker

　　近日有需求做一个职业选择弹框，在网上搜了半天也没合适的；

暴躁大佬协助我DIY一个插件，直接使用，顺滑流畅，随心所欲！特别鸣谢@一样菜

不多BB了，直接撸代码：

引用写在上面：

/* 更改职业 */
	selectOccupation : function() {
		// 展示类型
	    var ms = new MutliSelectorUI(App.dataCode, function (data) {
	    	App.OccupationTpCd = data.code;
			App.OCCUPATION_NAME = data.name;
			var str = data.name;
			if (str.length>14) {
				str = str.substr(0,14)+"...";
			} 
			$("#selectOccupation").val(str);
			$("#OccupationVal").val(data.code);
			ms.hideDialog();
	    });
	    if(App.version) {
	    	ms.showDialog();
		}else{
			ms.hideDialog();
		}
	},

　　

function MutliSelectorUI(data, fn){
    const data_list = data;
    var panelBg = document.createElement('div')
    panelBg.className="msu_panel_background"
    panelBg.setAttribute('id','msu_panel_background')
    document.body.appendChild(panelBg)
    var $panel = $('#msu_panel_background')
    $panel.css({
        display: 'none'
    })
    
    this.showDialog = function(){
        $panel.show()
        $("#pageB").attr({"data-btnLeft":"false||", "data-btnRight":"false||"});
        Fw.showPageArea($("#pageB"), [ $(".page") ], true);
    }
    this.hideDialog = function(){
        $panel.hide()
        $("#pageB").attr({"data-btnLeft":"true|返回|App.backPerson()", "data-btnRight":"true|保存|App.saveOccupation()"})
        Fw.showPageArea($("#pageB"), [ $(".page") ], true)
    }
    let self = this
    $panel.empty()
    $panel_box = $('<div class="msu_panel_box"></div>')
    $panel_box_cancel = $('<div class="msu_panel_cencels">取 消</div>')
    $panel.append($panel_box)
    $panel.append($panel_box_cancel)
   
    this.renderMainRow = function(){
        let indx = 0;
        $panel_box.empty()
        for(let item of data_list){
            console.log(JSON.stringify(item.classes))
            var $row_item = $('<div class="msu_main_row" code="'+item.code+'" name="'+item.name+'" isexpend="false"><div class="msu_text">'+item.name+'</div><div class="msu_arrow right"></div></div>')
            $panel_box.append($row_item)
            if(item.classes.length == 0){
                $row_item.find('.msu_arrow').hide()
            }
            indx++
            if(indx == data_list.length){
                $row_item.css({
                    borderBottom: '0'
                })
            }
          
        }
    }

    // init
    this.renderMainRow()
    $panel_box_cancel.on('click',function(){
        self.hideDialog()
    })
    $panel.on('click','.msu_main_row',function () {
        let _code = $(this).attr('code')
        let _name = $(this).attr('name')
        let isexpend = $(this).attr('isexpend')
        let classes = []

        for(let dt of data_list){
            if(dt.code == _code){
                classes = dt.classes
                break;
            }
        }
        if(classes.length == 0){

            if(typeof fn === 'function'){
                fn({
                    code:_code,
                    name: _name
                })
            }
            return;
        }
        $panel_box.empty();
       
        var $subitem = $('<div class="msu_back_btn"><div class="msu_arrow left"></div><div class="msu_text">'+_name+'</div></div>')
        $panel_box.append($subitem)
        let indx = 0
        for(var cls of classes){
            var $subitem = $('<div class="msu_sub_row" code="'+cls.code+'" name="'+cls.name+'">'+cls.name+'</div>')
            $panel_box.append($subitem);
            indx++
            if(indx == classes.length){
                $subitem.css({
                    borderBottom: '0'
                })
            }
        }
        
    })
    $panel.on('click','.msu_sub_row',function () {
        var _code = $(this).attr('code')
        var _name = $(this).attr('name')
        if(typeof fn === 'function'){
            fn({
                code:_code,
                name: _name
            })
        }
    })
    $panel.on('click','.msu_back_btn',function () {
        self.renderMainRow()
    })
    
   
}