一开始是弄个日期选择的插件，网上看到这个首先是常用的日期使用：

JS部分：

•             theme: "android-ics",  

•             lang: "zh",  
•             display: ‘bottom‘,  
•             dateFormat: ‘yy-mm-dd‘, //返回结果格式化为年月格式  
•             // wheels:[], 设置此属性可以只显示年月，此处演示，就用下面的onBeforeShow方法,另外也可以用treelist去实现  
•             //onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //弹掉“日”滚轮  
•             headerText: function (valueText) { //自定义弹出框头部格式  
•                 array = valueText.split(‘-‘);  
•                 return array[0] + "年" + array[1] + "月" + array[2] + "日";  
•             },  
•             onSelect: function (valueText, inst) {  
•                 $(this).find(".mbase-menu-txt").html(valueText);  
•                 /*$.post("inc/person.org.php", {apart: "resume_base", birthday: valueText}, function (result) { 
•                     if (result == ‘ok‘) { 
•                         $(this).find(".mbase-menu-txt").html(valueText); 
•                     } 
•                     else { 
•                         error(‘网络繁忙，请您稍后再试‘); 
•                     } 
•                 });*/ 这是后端入库部分  
•             }  
•         });  

这上门就是这个插件用在日期选择的部分，比较简单，查查api就知道了。这是效果图

下面的是treelist的，这个可用在比如选择文本项的时候，就因为这点我才觉得它真的够强大：

HTML部分：

li id="sex">  

•             <div class="mbase-menu-title">性别</div>  
•             <div class="mbase-menu-txt">未设置</div>  
•             <div class="clear"></div>  
•  </li>  

这里我说明下 由于我的项目结构比较例外，所以我才这样写的，官方的demo是直接

)，这样就遮丑了。还有一点要注意的就是

HTML部分：

li id="current-area">  

•             <div class="mbase-menu-title">现所在地</div>  
•             <div class="mbase-menu-txt">未设置</div>  
•             <div class="clear"></div>  
• </li>  

这个列表比较长，结构看明白就好

•             var that = this;  

•             $("#current-area-list").mobiscroll().treelist({  
•                 theme: "android-ics",  
•                 lang: "zh",  
•                 display: ‘bottom‘,  
•                 inputClass: ‘tmp‘,  
•                 headerText: ‘请您选择‘,  
•                 onSelect: function (valueText, inst) {  
•                     console.log(valueText);  
•                     var n = valueText.split(‘ ‘);  
•                     var m1 = $(this).children("li").eq(n[0]).find("div").html();  
•                     var m1_id = $(this).children("li").eq(n[0]).find("div").attr("data-value");  
•                     var m2 = $(this).children("li").eq(n[0]).find("li").eq(n[1]).html();  
•                     var m2_id = $(this).children("li").eq(n[0]).find("li").eq(n[1]).attr("data-value");  
•                     console.log(m1);  
•                     console.log(m2);  
•                     console.log(m1_id);  
•                     console.log(m2_id);  
•                     /*$.post("inc/person.org.php", {apart: "resume_base", current_area: m1+m2, current_areaPID: m1_id, current_areaCID: m2_id}, function (result) { 
•                         if (result == ‘ok‘) { 
•                             $(that).find(".mbase-menu-txt").html(m1+m2); 
•                         } 
•                         else { 
•                             error(‘网络繁忙，请您稍后再试‘); 
•                         } 
•                     });*/后端处理部分  
•                 }  
•             });  
•             $("input[id^=current-area-list]").focus();  
•         });  

其它的和单选文本的没什么区别，只是想说下这时候的valueText，它的值是这样的 2 6，意思就是第一项选择的元素所在位置，后面那个数字表示的是第二项选择的元素所在的位置。

附上css、js文件：

http://pan.baidu.com/s/1bpC9g5p

移动端选择插件mobiscroll的使用demo