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

Posted 2020-09-11

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

 

[html] view plain copy

1. <li id="birthday">  
2.     <div class="mbase-menu-title">生日</div>  
3.     <div  
4.         class="mbase-menu-txt">未设置</div>  
5.     <div class="clear"></div>  
6. </li>  

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>  

[html] view plain copy

1. <ul id="sex-list" style="display: none">  
2.     <li>先生</li>  
3.     <li>女士</li>  
4. </ul>  

 

[javascript] view plain copy

1. $("#sex").click(function () {  
2.             var that = this;  
3.             $("#sex-list").mobiscroll().treelist({  
4.                 theme: "android-ics",  
5.                 lang: "zh",  
6.                 display: ‘bottom‘,  
7.                 inputClass: ‘tmp‘,  
8.                 headerText: ‘请您选择‘,  
9.                 onSelect: function (valueText) {  
10.                     var m = $(this).find("li").eq(valueText).html();  
11.                     /*$.post("inc/person.org.php", {apart: "resume_base", sex: m}, function (result) { 
12.                         if (result == ‘ok‘) { 
13.                             $(that).find(".mbase-menu-txt").html(m); 
14.                         } 
15.                         else { 
16.                             error(‘网络繁忙，请您稍后再试‘); 
17.                         } 
18.                     });*/后端入库部分  
19.                 }  
20.             });  
21.             $("input[id^=sex-list]").focus();  
22.         });  

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

[javascript] view plain copy

1. $("#sex-list").mobiscroll().treelist({..})  

[javascript] view plain copy

1. 这因情况而异，后面那段<pre name="code" class="javascript">$("input[id^=sex-list]").focus();  

[javascript] view plain copy

1. 这里可能会问怎么回事啊，我也不知道怎么回事，只是我发现只要调用<pre name="code" class="javascript"><pre name="code" class="javascript">mobiscroll().treelist 的元素会自动变成input，然后弹出让你选择，这里我的项目结构为了美观，预算我设置了个inputClass:‘tmp‘  

[javascript] view plain copy

1. 这个tmp就是样式名，属性就一个透明度为0(<pre style="background-color:#272822;color:#f8f8f2;font-family:‘Consolas‘;font-size:12.0pt;"><span style="color:#f92672;">input</span>.<span style="color:#a6e22e;">tmp</span>{  
2.     <span style="color:#66d9ef;"><em>opacity</em></span>: <span style="color:#ae81ff;">0</span>;  
3. }  

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

[javascript] view plain copy

1. valueText 这个参数在treelist方法里面是返回当前选择的第几个元素li的值。  

HTML部分：

li id="current-area">  

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

 

[html] view plain copy

1. <ul id="education-list" style="display: none">  
2.             <li data-value="72">初中</li>  
3.             <li data-value="73">高中</li>  
4.             <li data-value="74">中技</li>  
5.             <li data-value="75">中专</li>  
6.             <li data-value="76">大专</li>  
7.             <li data-value="77">本科</li>  
8.             <li data-value="78">硕士</li>  
9.             <li data-value="79">MBA/EMBA</li>  
10.             <li data-value="80">博士</li>  
11.             <li data-value="81">博士后</li>  
12.     </ul>  
13. <ul id="current-area-list" style="display: none">  
14.            <li><div data-value="2">北京</div>  
15.        <ul>  
16.                      <li data-value="36">东城</li>  
17.                      <li data-value="37">西城</li>  
18.                      <li data-value="38">崇文</li>  
19.                      <li data-value="39">宣武</li>  
20.                      <li data-value="40">朝阳</li>  
21.                      <li data-value="41">丰台</li>  
22.                      <li data-value="42">石景山</li>  
23.                      <li data-value="43">海淀</li>  
24.                      <li data-value="44">门头沟</li>  
25.                      <li data-value="45">房山</li>  
26.                      <li data-value="46">通州</li>  
27.                      <li data-value="47">顺义</li>  
28.                      <li data-value="48">昌平</li>  
29.                      <li data-value="49">大兴</li>  
30.                      <li data-value="50">平谷</li>  
31.                      <li data-value="51">怀柔</li>  
32.                      <li data-value="52">密云</li>  
33.                      <li data-value="53">延庆</li>  
34.                   </ul>  
35.        </li>  
36.            <li><div data-value="3">天津</div>  
37.        <ul>  
38.                      <li data-value="54">和平</li>  
39.                      <li data-value="55">河东</li>  
40.                      <li data-value="56">河西</li>  
41.                      <li data-value="57">南开</li>  
42.                      <li data-value="58">红桥</li>  
43.                      <li data-value="59">塘沽</li>  
44.                      <li data-value="60">汉沽</li>  
45.                      <li data-value="61">大港</li>  
46.                      <li data-value="62">东丽</li>  
47.                      <li data-value="63">西青</li>  
48.                      <li data-value="64">津南</li>  
49.                      <li data-value="65">北辰</li>  
50.                      <li data-value="66"> 宁河</li>  
51.                      <li data-value="67">武清</li>  
52.                      <li data-value="68">静海</li>  
53.                      <li data-value="69">宝坻</li>  
54.                      <li data-value="70">蓟州</li>  
55.                   </ul>  
56.        </li>  
57.            <li><div data-value="4">河北</div>  
58.        <ul>  
59.                      <li data-value="71">石家庄</li>  
60.                      <li data-value="72">唐山</li>  
61.                      <li data-value="73">秦皇岛</li>  
62.                      <li data-value="74">邯郸</li>  
63.                      <li data-value="75">邢台</li>  
64.                      <li data-value="76">保定</li>  
65.                      <li data-value="77">张家口</li>  
66.                      <li data-value="78">承德</li>  
67.                      <li data-value="79">沧州</li>  
68.                      <li data-value="80">廊坊</li>  
69.                      <li data-value="81">衡水</li>  
70.                   </ul>  
71.        </li>  
72.            <li><div data-value="5">山西</div>  
73.        <ul>  
74.                      <li data-value="82">太原</li>  
75.                      <li data-value="83">大同</li>  
76.                      <li data-value="84">阳泉</li>  
77.                      <li data-value="85">长治</li>  
78.                      <li data-value="86">晋中</li>  
79.                      <li data-value="87">运城</li>  
80.                      <li data-value="88">忻州</li>  
81.                      <li data-value="89">临汾</li>  
82.                      <li data-value="90">吕梁</li>  
83.                   </ul>  
84.        </li>  
85.            <li><div data-value="6">内蒙古</div>  
86.        <ul>  
87.                      <li data-value="91">呼和浩特</li>  
88.                      <li data-value="92">包头</li>  
89.                      <li data-value="93">乌海</li>  
90.                      <li data-value="94">赤峰</li>  
91.                      <li data-value="95">通辽</li>  
92.                      <li data-value="96">鄂尔多斯</li>  
93.                      <li data-value="97">呼伦贝尔</li>  
94.                      <li data-value="98">巴彦淖尔</li>  
95.                      <li data-value="99">乌兰察布</li>  
96.                      <li data-value="100">海拉尔</li>  
97.                      <li data-value="101">集宁</li>  
98.                      <li data-value="102">巴彦浩特</li>  
99.                      <li data-value="103">锡林浩特</li>  
100.                      <li data-value="104">临河</li>  
101.                      <li data-value="105">乌兰察布盟</li>  
102.                      <li data-value="106">兴安盟</li>  
103.                      <li data-value="107">阿拉善盟</li>  
104.                      <li data-value="108">兴安</li>  
105.                      <li data-value="109">锡林郭勒</li>  
106.                      <li data-value="110">阿拉善</li>  
107.                   </ul>  
108.        </li>  
109.            <li><div data-value="7">辽宁</div>  
110.        <ul>  
111.                      <li data-value="111">沈阳</li>  
112.                      <li data-value="112">大连</li>  
113.                      <li data-value="113">鞍山</li>  
114.                      <li data-value="114">抚顺</li>  
115.                      <li data-value="115">本溪</li>  
116.                      <li data-value="116">丹东</li>  
117.                      <li data-value="117">锦州</li>  
118.                      <li data-value="118">营口</li>  
119.                      <li data-value="119">阜新</li>  
120.                      <li data-value="120">辽阳</li>  
121.                      <li data-value="121">盘锦</li>  
122.                      <li data-value="122">铁岭</li>  
123.                      <li data-value="123">葫芦岛</li>  
124.                   </ul>  
125.        </li>  
126.            <li><div data-value="8">吉林</div>  
127.        <ul>  
128.                      <li data-value="124">长春</li>  
129.                      <li data-value="125">四平</li>  
130.                      <li data-value="126">辽源</li>  
131.                      <li data-value="127">通化</li>  
132.                      <li data-value="128">白山</li>  
133.                      <li data-value="129">松源</li>  
134.                      <li data-value="130">白城</li>  
135.                      <li data-value="131">梅河口</li>  
136.                      <li data-value="132">珲春</li>  
137.                      <li data-value="133">延吉</li>  
138.                      <li data-value="134">延边</li>  
139.                   </ul>  
140.        </li>  
141.            <li><div data-value="9">黑龙江</div>  
142.        <ul>  
143.                      <li data-value="135">哈尔滨</li>  
144.                      <li data-value="136">齐齐哈尔</li>  
145.                      <li data-value="137">鸡西</li>  
146.                      <li data-value="138">鹤岗</li>  
147.                      <li data-value="139">双鸭山</li>  
148.                      <li data-value="140">大庆</li>  
149.                      <li data-value="141">伊春</li>  
150.                      <li data-value="142">佳木斯</li>  
151.                      <li data-value="143">七台河</li>  
152.                      <li data-value="144">牡丹江</li>  
153.                      <li data-value="145">黑河</li>  
154.                      <li data-value="146">绥化</li>  
155.                      <li data-value="147">大兴安岭</li>  
156.                   </ul>  
157.        </li>  
158.            <li><div data-value="10">上海</div>  
159.        <ul>  
160.                      <li data-value="148">黄浦</li>  
161.                      <li data-value="149">南区</li>  
162.                      <li data-value="150">卢湾</li>  
163.                      <li data-value="151">徐汇</li>  
164.                      <li data-value="152">长宁</li>  
165.                      <li data-value="153">静安</li>  
166.                      <li data-value="154">普陀</li>  
167.                      <li data-value="155">闸北</li>  
168.                      <li data-value="156">虹口</li>  
169.                      <li data-value="157">杨浦</li>  
170.                      <li data-value="158">闵行</li>  
171.                      <li data-value="159">宝山</li>  
172.                      <li data-value="160">嘉定</li>  
173.                      <li data-value="161">浦东新区</li>  
174.                      <li data-value="162">金山</li>  
175.                      <li data-value="163">松江</li>  
176.                      <li data-value="164">南汇</li>  
177.                      <li data-value="165">奉贤</li>  
178.                      <li data-value="166">青浦</li>  
179.                      <li data-value="167">崇明</li>  
180.                   </ul>  
181.        </li>  
182.            <li><div data-value="11">江苏</div>  
183.        <ul>  
184.                      <li data-value="168">南京</li>  
185.                      <li data-value="169">无锡</li>  
186.                      <li data-value="170">徐州</li>  
187.                      <li data-value="171">常州 </li>  
188.                      <li data-value="172">苏州</li>  
189.                      <li data-value="173">南通</li>  
190.                      <li data-value="174">连云港</li>  
191.                      <li data-value="175">淮安 </li>  
192.                      <li data-value="176">盐城</li>  
193.                      <li data-value="177">扬州</li>  
194.                      <li data-value="178">镇江</li>  
195.                      <li data-value="179">秦州</li>  
196.                      <li data-value="180">宿迁</li>  
197.                   </ul>  
198.        </li>  
199.            <li><div data-value="12">浙江</div>  
200.        <ul>  
201.                      <li data-value="181">杭州</li>  
202.                      <li data-value="182">宁波</li>  
203.                      <li data-value="183">温州</li>  
204.                      <li data-value="184">嘉兴</li>  
205.                      <li data-value="185">湖州</li>  
206.                      <li data-value="186">绍兴</li>  
207.                      <li data-value="187">金华</li>  
208.                      <li data-value="188">衡州</li>  
209.                      <li data-value="189">舟山</li>  
210.                      <li data-value="190">台州</li>  
211.                      <li data-value="191">丽水</li>  
212.                   </ul>  
213.        </li>  
214.            <li><div data-value="13">安徽</div>  
215.        <ul>  
216.                      <li data-value="192">合肥</li>  
217.                      <li data-value="193">芜湖</li>  
218.                      <li data-value="194">蚌埠</li>  
219.                      <li data-value="195">淮南</li>  
220.                      <li data-value="196">马鞍山</li>  
221.                      <li data-value="197">淮北</li>  
222.                      <li data-value="198">铜陵</li>  
223.                      <li data-value="199">安庆</li>  
224.                      <li data-value="200">黄山</li>  
225.                      <li data-value="201">滁州</li>  
226.                      <li data-value="202">阜阳</li>  
227.                      <li data-value="203">宿州</li>  
228.                      <li data-value="204">巢湖</li>  
229.                      <li data-value="205">六安</li>  
230.                      <li data-value="206">毫州</li>  
231.                      <li data-value="207">池州</li>  
232.                      <li data-value="208">宣城</li>  
233.                   </ul>  
234.        </li>  
235.            <li><div data-value="14">福建</div>  
236.        <ul>  
237.                      <li data-value="209">福州</li>  
238.                      <li data-value="210">厦门</li>  
239.                      <li data-value="211">莆田</li>  
240.                      <li data-value="212">三明</li>  
241.                      <li data-value="213">泉州</li>  
242.                      <li data-value="214">漳州</li>  
243.                      <li data-value="215">南平</li>  
244.                      <li data-value="216">龙岩</li>  
245.                      <li data-value="217">宁德</li>  
246.                   </ul>  
247.        </li>  
248.            <li><div data-value="15">江西</div>  
249.        <ul>  
250.                      <li data-value="218">南昌</li>  
251.                      <li data-value="219">景德镇</li>  
252.                      <li data-value="220">萍乡</li>  
253.                      <li data-value="221">九江</li>  
254.                      <li data-value="222">新余</li>  
255.                      <li data-value="223">鹰潭</li>  
256.                      <li data-value="224">赣州</li>  
257.                      <li data-value="225">吉安</li>  
258.                      <li data-value="226">宜春</li>  
259.                      <li data-value="227">抚州</li>  
260.                      <li data-value="228">上饶</li>  
261.                   </ul>  
262.        </li>  
263.            <li><div data-value="16">山东</div>  
264.        <ul>  
265.                      <li data-value="229">济南</li>  
266.                      <li data-value="230">青岛</li>  
267.                      <li data-value="231">淄博</li>  
268.                      <li data-value="232">枣庄</li>  
269.                      <li data-value="233">东营</li>  
270.                      <li data-value="234">烟台</li>  
271.                      <li data-value="235">潍坊</li>  
272.                      <li data-value="236">济宁</li>  
273.                      <li data-value="237">泰安</li>  
274.                      <li data-value="238">威海</li>  
275.                      <li data-value="239">日照</li>  
276.                      <li data-value="240">莱芜</li>  
277.                      <li data-value="241">临沂</li>  
278.                      <li data-value="242">德州</li>  
279.                      <li data-value="243">聊城</li>  
280.                      <li data-value="244">滨州</li>  
281.                      <li data-value="245">菏泽</li>  
282.                   </ul>  
283.        </li>  
284.            <li><div data-value="17">河南</div>  
285.        <ul>  
286.                      <li data-value="246">郑州</li>  
287.                      <li data-value="247">开封</li>  
288.                      <li data-value="248">洛阳</li>  
289.                      <li data-value="249">平顶山</li>  
290.                      <li data-value="250">安阳</li>  
291.                      <li data-value="251">鹤壁</li>  
292.                      <li data-value="252">新乡</li>  
293.                      <li data-value="253">焦作</li>  
294.                      <li data-value="254">濮阳</li>  
295.                      <li data-value="255">许昌</li>  
296.                      <li data-value="256">漯河</li>  
297.                      <li data-value="257">三门峡</li>  
298.                      <li data-value="258">南阳</li>  
299.                      <li data-value="259">商丘</li>  
300.                      <li data-value="260">信阳</li>  
301.                      <li data-value="261">周口</li>  
302.                      <li data-value="262">驻马店</li>  
303.                      <li data-value="263">潢川</li>  
304.                      <li data-value="264">济源</li>  
305.                   </ul>  
306.        </li>  
307.            <li><div data-value="18">湖北</div>  
308.        <ul>  
309.                      <li data-value="265">武汉</li>  
310.                      <li data-value="266">黄石</li>  
311.                      <li data-value="267">十堰</li>  
312.                      <li data-value="268">仙桃</li>  
313.                      <li data-value="269">宜昌</li>  
314.                      <li data-value="270">襄阳</li>  
315.                      <li data-value="271">鄂州</li>  
316.                      <li data-value="272">荆门</li>  
317.                      <li data-value="273">孝感</li>  
318.                      <li data-value="274">荆州</li>  
319.                      <li data-value="275">黄冈</li>  
320.                      <li data-value="276">咸宁</li>  
321.                      <li data-value="277">随州</li>  
322.                      <li data-value="278">江汉</li>  
323.                      <li data-value="279">天门</li>  
324.                      <li data-value="280">潜江</li>  
325.                      <li data-value="281">神农架区</li>  
326.                      <li data-value="282">恩施</li>  
327.                   </ul>  
328.        </li>  
329.            <li><div data-value="19">湖南</div>  
330.        <ul>  
331.                      <li data-value="283">长沙</li>  
332.                      <li data-value="284">株洲</li>  
333.                      <li data-value="285">湘潭</li>  
334.                      <li data-value="286">衡阳</li>  
335.                      <li data-value="287">邵阳</li>  
336.                      <li data-value="288">常德</li>  
337.                      <li data-value="289">张家界</li>  
338.                      <li data-value="290">益阳</li>  
339.                      <li data-value="291">郴州</li>  
340.                      <li data-value="292">永州</li>  
341.                      <li data-value="293">怀化</li>  
342.                      <li data-value="294">娄底</li>  
343.                      <li data-value="295">吉首</li>  
344.                      <li data-value="296">湘西</li>  
345.                   </ul>  
346.        </li>  
347.            <li><div data-value="20">广东</div>  
348.        <ul>  
349.                      <li data-value="297">广州</li>  
350.                      <li data-value="298">韶关</li>  
351.                      <li data-value="299">深圳</li>  
352.                      <li data-value="300">珠海</li>  
353.                      <li data-value="301">汕头</li>  
354.                      <li data-value="302">佛山</li>  
355.                      <li data-value="303">江门</li>  
356.                      <li data-value="304">湛江</li>  
357.                      <li data-value="305">茂名</li>  
358.                      <li data-value="306">顺德</li>  
359.                      <li data-value="307">潮阳</li>  
360.                      <li data-value="308">肇庆</li>  
361.                      <li data-value="309">惠州</li>  
362.                      <li data-value="310">梅州</li>  
363.                      <li data-value="311">汕尾</li>  
364.                      <li data-value="312">河源</li>  
365.                      <li data-value="313">阳江</li>  
366.                      <li data-value="314">清远</li>  
367.                      <li data-value="315">中山</li>  
368.                      <li data-value="316">潮州</li>  
369.                      <li data-value="317">揭阳</li>  
370.                      <li data-value="318">云浮</li>  
371.                   </ul>  
372.        </li>  
373.            <li><div data-value="21">广西</div>  
374.        <ul>  
375.                      <li data-value="319">南宁</li>  
376.                      <li data-value="320">柳州</li>  
377.                      <li data-value="321">桂林</li>  
378.                      <li data-value="322">梧州</li>  
379.                      <li data-value="323">北海</li>  
380.                      <li data-value="324">防城港</li>  
381.                      <li data-value="325">钦州</li>  
382.                      <li data-value="326">贵港</li>  
383.                      <li data-value="327">玉林</li>  
384.                      <li data-value="328">百色</li>  
385.                      <li data-value="329">贺州</li>  
386.                      <li data-value="330">河池</li>  
387.                      <li data-value="331">来宾</li>  
388.                      <li data-value="332">崇左</li>  
389.                   </ul>  
390.        </li>  
391.            <li><div data-value="22">海南</div>  
392.        <ul>  
393.                      <li data-value="333">海口</li>  
394.                      <li data-value="334">三亚</li>  
395.                      <li data-value="335">儋州</li>  
396.                      <li data-value="336">文昌</li>  
397.                      <li data-value="337">三沙地区</li>  
398.                      <li data-value="338">琼海</li>  
399.                   </ul>  
400.        </li>  
401.            <li><div data-value="23">重庆</div>  
402.        <ul>  
403.                      <li data-value="339">万州</li>  
404.                      <li data-value="340">涪陵</li>  
405.                      <li data-value="341">渝中</li>  
406.                      <li data-value="342">大渡口</li>  
407.                      <li data-value="343">江北</li>  
408.                      <li data-value="344">沙坪坝</li>  
409.                      <li data-value="345">九龙坡</li>  
410.                      <li data-value="346">南岸</li>  
411.                      <li data-value="347">北碚</li>  
412.                      <li data-value="348">万盛</li>  
413.                      <li data-value="349">双桥</li>  
414.                      <li data-value="350">渝北</li>  
415.                      <li data-value="351">巴南</li>  
416.                      <li data-value="352">长寿</li>  
417.                      <li data-value="353">綦江</li>  
418.                      <li data-value="354">潼南</li>  
419.                      <li data-value="355">铜梁</li>  
420.                      <li data-value="356">大足</li>  
421.                      <li data-value="357">荣昌</li>  
422.                      <li data-value="358">璧山</li>  
423.                      <li data-value="359">梁平</li>  
424.                      <li data-value="360">城口</li>  
425.                      <li data-value="361">丰都</li>  
426.                      <li data-value="362">垫江</li>  
427.                      <li data-value="363">武隆</li>  
428.                      <li data-value="364">忠县</li>  
429.                      <li data-value="365">开县</li>  
430.                      <li data-value="366">云阳</li>  
431.                      <li data-value="367">奉节</li>  
432.                      <li data-value="368">巫山</li>  
433.                      <li data-value="369">巫溪</li>  
434.                      <li data-value="370">黔江</li>  
435.                      <li data-value="371">石柱</li>  
436.                      <li data-value="372">秀山</li>  
437.                      <li data-value="373">酋阳</li>  
438.                      <li data-value="374">彭水</li>  
439.                      <li data-value="375">江津</li>  
440.                      <li data-value="376">合川</li>  
441.                      <li data-value="377">永川</li>  
442.                      <li data-value="378">南川</li>  
443.                   </ul>  
444.        </li>  
445.            <li><div data-value="24">四川</div>  
446.        <ul>  
447.                      <li data-value="379">成都</li>  
448.                      <li data-value="380">自贡</li>  
449.                      <li data-value="381">攀枝花</li>  
450.                      <li data-value="382">泸州</li>  
451.                      <li data-value="383">德阳</li>  
452.                      <li data-value="384">绵阳</li>  
453.                      <li data-value="385">广元</li>  
454.                      <li data-value="386">遂宁</li>  
455.                      <li data-value="387">内江</li>  
456.                      <li data-value="388">乐山</li>  
457.                      <li data-value="389">南充</li>  
458.                      <li data-value="390">眉山</li>  
459.                      <li data-value="391">宜宾</li>  
460.                      <li data-value="392">广安</li>  
461.                      <li data-value="393">达州</li>  
462.                      <li data-value="394">雅安</li>  
463.                      <li data-value="395">巴中</li>  
464.                      <li data-value="396">资阳</li>  
465.                      <li data-value="397">阿坝</li>  
466.                      <li data-value="398">甘孜</li>  
467.                      <li data-value="399">凉山</li>  
468.                   </ul>  
469.        </li>  
470.            <li><div data-value="25">贵州</div>  
471.        <ul>  
472.                      <li data-value="400">贵阳</li>  
473.                      <li data-value="401">六盘水</li>  
474.                      <li data-value="402">遵义</li>  
475.                      <li data-value="403">安顺</li>  
476.                      <li data-value="404">兴义</li>  
477.                      <li data-value="405">凯里</li>  
478.                      <li data-value="406">都匀</li>  
479.                      <li data-value="407">铜仁</li>  
480.                      <li data-value="408">黔西南</li>  
481.                      <li data-value="409">毕节</li>  
482.                      <li data-value="410">黔东南</li>  
483.                      <li data-value="411">黔南</li>  
484.                   </ul>  
485.        </li>  
486.            <li><div data-value="26">云南</div>  
487.        <ul>  
488.                      <li data-value="412">昆明</li>  
489.                      <li data-value="413">怒江</li>  
490.                      <li data-value="414">曲靖</li>  
491.                      <li data-value="415">玉溪</li>  
492.                      <li data-value="416">保山</li>  
493.                      <li data-value="417">昭通</li>  
494.                      <li data-value="418">丽江</li>  
495.                      <li data-value="419">普洱</li>  
496.                      <li data-value="420">临沧</li>  
497.                      <li data-value="421">版纳</li>  
498.                      <li data-value="422">楚雄</li>  
499.                      <li data-value="423">红河</li>  
500.                      <li data-value="424">文山</li>  
501.                      <li data-value="425">西双版纳</li>  
502.                      <li data-value="426">大理</li>  
503.                      <li data-value="427">德宏</li>  
504.                      <li data-value="428">怒江傈</li>  
505.                      <li data-value="429">迪庆</li>  
506.                   </ul>  
507.        </li>  
508.            <li><div data-value="27">西藏</div>  
509.        <ul>  
510.                      <li data-value="430">拉萨</li>  
511.                      <li data-value="431">昌都</li>  
512.                      <li data-value="432">山南</li>  
513.                      <li data-value="433">日喀则</li>  
514.                      <li data-value="434">那曲</li>  
515.                      <li data-value="435">阿里</li>  
516.                      <li data-value="436">林芝</li>  
517.                   </ul>  
518.        </li>  
519.            <li><div data-value="28">陕西</div>  
520.        <ul>  
521.                      <li data-value="437">西安</li>  
522.                      <li data-value="438">铜川</li>  
523.                      <li data-value="439">宝鸡</li>  
524.                      <li data-value="440">咸阳</li>  
525.                      <li data-value="441">渭南</li>  
526.                      <li data-value="442">延安</li>  
527.                      <li data-value="443">汉中</li>  
528.                      <li data-value="444">榆林</li>  
529.                      <li data-value="445">安康</li>  
530.                      <li data-value="446">商洛</li>  
531.                   </ul>  
532.        </li>  
533.            <li><div data-value="29">甘肃</div>  
534.        <ul>  
535.                      <li data-value="447">兰州</li>  
536.                      <li data-value="448">嘉峪关</li>  
537.                      <li data-value="449">金昌</li>  
538.                      <li data-value="450">白银</li>  
539.                      <li data-value="451">天水</li>  
540.                      <li data-value="452">武威</li>  
541.                      <li data-value="453">张掖</li>  
542.                      <li data-value="454">平京</li>  
543.                      <li data-value="455">酒泉</li>  
544.                      <li data-value="456">庆阳</li>  
545.                      <li data-value="457">定西</li>  
546.                      <li data-value="458">陇南</li>  
547.                      <li data-value="459">临夏</li>  
548.                      <li data-value="460">甘南</li>  
549.                   </ul>  
550.        </li>  
551.            <li><div data-value="30">青海</div>  
552.        <ul>  
553.                      <li data-value="461">西宁</li>  
554.                      <li data-value="462">格尔木</li>  
555.                      <li data-value="463">海东</li>  
556.                      <li data-value="464">海北</li>  
557.                      <li data-value="465">黄南</li>  
558.                      <li data-value="466">果洛</li>  
559.                      <li data-value="467">玉树</li>  
560.                      <li data-value="468">海西</li>  
561.                   </ul>  
562.        </li>  
563.            <li><div data-value="31">宁夏</div>  
564.        <ul>  
565.                      <li data-value="469">银川</li>  
566.                      <li data-value="470">石嘴山</li>  
567.                      <li data-value="471">吴忠</li>  
568.                      <li data-value="472">固原</li>  
569.                      <li data-value="473">中卫</li>  
570.                   </ul>  
571.        </li>  
572.            <li><div data-value="32">新疆</div>  
573.        <ul>  
574.                      <li data-value="474">乌鲁木齐</li>  
575.                      <li data-value="475">克拉玛依</li>  
576.                      <li data-value="476">奎屯</li>  
577.                      <li data-value="477">吐鲁番</li>  
578.                      <li data-value="478">哈密</li>  
579.                      <li data-value="479">昌吉</li>  
580.                      <li data-value="480">博尔塔拉</li>  
581.                      <li data-value="481">巴音郭楞</li>  
582.                      <li data-value="482">阿克苏</li>  
583.                      <li data-value="483">克孜勒苏</li>  
584.                      <li data-value="484">喀什</li>  
585.                      <li data-value="485">和田</li>  
586.                      <li data-value="486">伊犁</li>  
587.                      <li data-value="487">塔城</li>  
588.                      <li data-value="488">阿勒泰</li>  
589.                      <li data-value="489">石河子</li>  
590.                      <li data-value="490">五家渠</li>  
591.                   </ul>  
592.        </li>  
593.            <li><div data-value="33">台湾</div>  
594.        <ul>  
595.                      <li data-value="534">台北</li>  
596.                      <li data-value="535">新北</li>  
597.                      <li data-value="536">桃园</li>  
598.                      <li data-value="537">台中</li>  
599.                      <li data-value="538">台南</li>  
600.                      <li data-value="539">高雄</li>  
601.                   </ul>  
602.        </li>  
603.            <li><div data-value="34">香港</div>  
604.        <ul>  
605.                      <li data-value="540">中西区</li>  
606.                      <li data-value="541">东区</li>  
607.                      <li data-value="542">九龙城区</li>  
608.                      <li data-value="543">观塘区</li>  
609.                      <li data-value="544">深水埗区</li>  
610.                      <li data-value="545">黄大仙区</li>  
611.                      <li data-value="546">湾仔区</li>  
612.                      <li data-value="547">油尖旺区</li>  
613.                      <li data-value="548">离岛区</li>  
614.                      <li data-value="549">葵青区</li>  
615.                      <li data-value="550">北区</li>  
616.                      <li data-value="551">西贡区</li>  
617.                      <li data-value="552">沙田区</li>  
618.                      <li data-value="553">屯门区 </li>  
619.                      <li data-value="554">大埔区</li>  
620.                      <li data-value="555">荃湾区</li>  
621.                      <li data-value="556">元朗区</li>  
622.                   </ul>  
623.        </li>  
624.            <li><div data-value="35">澳门</div>  
625.        <ul>  
626.                      <li data-value="557">花地玛堂区</li>  
627.                      <li data-value="558">圣安多尼堂区</li>  
628.                      <li data-value="559">大堂区</li>  
629.                      <li data-value="560">望德堂区</li>  
630.                      <li data-value="561">风顺堂区</li>  
631.                      <li data-value="562">嘉模堂区</li>  
632.                      <li data-value="563">圣方济各堂区</li>  
633.                      <li data-value="564">路氹城</li>  
634.                   </ul>  
635.        </li>  
636.            <li><div data-value="491">国外</div>  
637.        <ul>  
638.                      <li data-value="492">澳大利亚</li>  
639.                      <li data-value="493">加拿大</li>  
640.                      <li data-value="494">英国</li>  
641.                      <li data-value="495">日本</li>  
642.                      <li data-value="496">新加坡</li>  
643.                      <li data-value="497">德国</li>  
644.                      <li data-value="498">法国</li>  
645.                      <li data-value="499">韩国</li>  
646.                      <li data-value="500">比利时</li>  
647.                      <li data-value="501">新西兰</li>  
648.                      <li data-value="502">瑞典</li>  
649.                      <li data-value="503">瑞士</li>  
650.                      <li data-value="504">荷兰</li>  
651.                      <li data-value="505">阿联酋</li>  
652.                      <li data-value="506">芬兰</li>  
653.                      <li data-value="507">丹麦</li>  
654.                      <li data-value="508">泰国</li>  
655.                      <li data-value="509">西班牙</li>  
656.                      <li data-value="510">意大利</li>  
657.                      <li data-value="511">挪威</li>  
658.                      <li data-value="512">奥地利</li>  
659.                      <li data-value="513">爱尔兰</li>  
660.                      <li data-value="514">马来西亚</li>  
661.                      <li data-value="515">尼日利亚</li>  
662.                      <li data-value="516">俄罗斯</li>  
663.                      <li data-value="517">巴西</li>  
664.                      <li data-value="518">南非</li>  
665.                      <li data-value="519">葡萄牙</li>  
666.                      <li data-value="520">墨西哥</li>  
667.                      <li data-value="521">印尼</li>  
668.                      <li data-value="522">越南</li>  
669.                      <li data-value="523">以色列</li>  
670.                      <li data-value="524">科威特</li>  
671.                      <li data-value="525">希腊</li>  
672.                      <li data-value="526">匈牙利</li>  
673.                      <li data-value="527">阿根廷</li>  
674.                      <li data-value="528">印度</li>  
675.                      <li data-value="529">柬埔寨</li>  
676.                      <li data-value="530">菲律宾</li>  
677.                      <li data-value="531">埃及</li>  
678.                      <li data-value="532">土耳其</li>  
679.                      <li data-value="533">其他</li>  
680.                   </ul>  
681.        </li>  
682.     </ul>  

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

•             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