移動端選擇外掛mobiscroll的使用demo
阿新 • • 發佈：2019-01-09
一開始是弄個日期選擇的外掛，網上看到這個mobiscroll這個外掛，然後各種下各種找demo，最後自己研究了一天下面把自己專案的demo拔出來分享給大家（以及檔案下載），多多海涵，如果大家看了我的這文章有更好的寫法還望賜教~
首先是常用的日期使用：
HTML部分：
JS部分：<li id="birthday"> <div class="mbase-menu-title">生日</div> <div class="mbase-menu-txt">未設定</div> <div class="clear"></div> </li>
這上門就是這個外掛用在日期選擇的部分，比較簡單，查查api就知道了。這是效果圖$("#birthday").mobiscroll().date({ 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('網路繁忙，請您稍後再試'); } });*/ 這是後端入庫部分 } });
下面的是treelist的，這個可用在比如選擇文字項的時候，就因為這點我才覺得它真的夠強大：
單項選擇文字的
HTML部分：
<li id="sex"> <div class="mbase-menu-title">性別</div> <div class="mbase-menu-txt">未設定</div> <div class="clear"></div> </li>
<ul id="sex-list" style="display: none">
<li>先生</li>
<li>女士</li>
</ul>JS部分：
$("#sex").click(function () {
var that = this;
$("#sex-list").mobiscroll().treelist({
theme: "android-ics",
lang: "zh",
display: 'bottom',
inputClass: 'tmp',
headerText: '請您選擇',
onSelect: function (valueText) {
var m = $(this).find("li").eq(valueText).html();
/*$.post("inc/person.org.php", {apart: "resume_base", sex: m}, function (result) {
if (result == 'ok') {
$(that).find(".mbase-menu-txt").html(m);
}
else {
error('網路繁忙，請您稍後再試');
}
});*/後端入庫部分
}
});
$("input[id^=sex-list]").focus();
});$("#sex-list").mobiscroll().treelist({..})這因情況而異，後面那段<pre name="code" class="javascript">$("input[id^=sex-list]").focus();這裡可能會問怎麼回事啊，我也不知道怎麼回事，只是我發現只要呼叫<pre name="code" class="javascript"><pre name="code" class="javascript">mobiscroll().treelist 的元素會自動變成input，然後彈出讓你選擇，這裡我的專案結構為了美觀，預算我設定了個inputClass:'tmp'這個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>{
<span style="color:#66d9ef;"><em>opacity</em></span>: <span style="color:#ae81ff;">0</span>;
}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><ul id="education-list" style="display: none">
<li data-value="72">初中</li>
<li data-value="73">高中</li>
<li data-value="74">中技</li>
<li data-value="75">中專</li>
<li data-value="76">大專</li>
<li data-value="77">本科</li>
<li data-value="78">碩士</li>
<li data-value="79">MBA/EMBA</li>
<li data-value="80">博士</li>
<li data-value="81">博士後</li>
</ul>
<ul id="current-area-list" style="display: none">
<li><div data-value="2">北京</div>
<ul>
<li data-value="36">東城</li>
<li data-value="37">西城</li>
<li data-value="38">崇文</li>
<li data-value="39">宣武</li>
<li data-value="40">朝陽</li>
<li data-value="41">豐臺</li>
<li data-value="42">石景山</li>
<li data-value="43">海淀</li>
<li data-value="44">門頭溝</li>
<li data-value="45">房山</li>
<li data-value="46">通州</li>
<li data-value="47">順義</li>
<li data-value="48">昌平</li>
<li data-value="49">大興</li>
<li data-value="50">平谷</li>
<li data-value="51">懷柔</li>
<li data-value="52">密雲</li>
<li data-value="53">延慶</li>
</ul>
</li>
<li><div data-value="3">天津</div>
<ul>
<li data-value="54">和平</li>
<li data-value="55">河東</li>
<li data-value="56">河西</li>
<li data-value="57">南開</li>
<li data-value="58">紅橋</li>
<li data-value="59">塘沽</li>
<li data-value="60">漢沽</li>
<li data-value="61">大港</li>
<li data-value="62">東麗</li>
<li data-value="63">西青</li>
<li data-value="64">津南</li>
<li data-value="65">北辰</li>
<li data-value="66"> 寧河</li>
<li data-value="67">武清</li>
<li data-value="68">靜海</li>
<li data-value="69">寶坻</li>
<li data-value="70">薊州</li>
</ul>
</li>
<li><div data-value="4">河北</div>
<ul>
<li data-value="71">石家莊</li>
<li data-value="72">唐山</li>
<li data-value="73">秦皇島</li>
<li data-value="74">邯鄲</li>
<li data-value="75">邢臺</li>
<li data-value="76">保定</li>
<li data-value="77">張家口</li>
<li data-value="78">承德</li>
<li data-value="79">滄州</li>
<li data-value="80">廊坊</li>
<li data-value="81">衡水</li>
</ul>
</li>
<li><div data-value="5">山西</div>
<ul>
<li data-value="82">太原</li>
<li data-value="83">大同</li>
<li data-value="84">陽泉</li>
<li data-value="85">長治</li>
<li data-value="86">晉中</li>
<li data-value="87">運城</li>
<li data-value="88">忻州</li>
<li data-value="89">臨汾</li>
<li data-value="90">呂梁</li>
</ul>
</li>
<li><div data-value="6">內蒙古</div>
<ul>
<li data-value="91">呼和浩特</li>
<li data-value="92">包頭</li>
<li data-value="93">烏海</li>
<li data-value="94">赤峰</li>
<li data-value="95">通遼</li>
<li data-value="96">鄂爾多斯</li>
<li data-value="97">呼倫貝爾</li>
<li data-value="98">巴彥淖爾</li>
<li data-value="99">烏蘭察布</li>
<li data-value="100">海拉爾</li>
<li data-value="101">集寧</li>
<li data-value="102">巴彥浩特</li>
<li data-value="103">錫林浩特</li>
<li data-value="104">臨河</li>
<li data-value="105">烏蘭察布盟</li>
<li data-value="106">興安盟</li>
<li data-value="107">阿拉善盟</li>
<li data-value="108">興安</li>
<li data-value="109">錫林郭勒</li>
<li data-value="110">阿拉善</li>
</ul>
</li>
<li><div data-value="7">遼寧</div>
<ul>
<li data-value="111">瀋陽</li>
<li data-value="112">大連</li>
<li data-value="113">鞍山</li>
<li data-value="114">撫順</li>
<li data-value="115">本溪</li>
<li data-value="116">丹東</li>
<li data-value="117">錦州</li>
<li data-value="118">營口</li>
<li data-value="119">阜新</li>
<li data-value="120">遼陽</li>
<li data-value="121">盤錦</li>
<li data-value="122">鐵嶺</li>
<li data-value="123">葫蘆島</li>
</ul>
</li>
<li><div data-value="8">吉林</div>
<ul>
<li data-value="124">長春</li>
<li data-value="125">四平</li>
<li data-value="126">遼源</li>
<li data-value="127">通化</li>
<li data-value="128">白山</li>
<li data-value="129">鬆源</li>
<li data-value="130">白城</li>
<li data-value="131">梅河口</li>
<li data-value="132">琿春</li>
<li data-value="133">延吉</li>
<li data-value="134">延邊</li>
</ul>
</li>
<li><div data-value="9">黑龍江</div>
<ul>
<li data-value="135">哈爾濱</li>
<li data-value="136">齊齊哈爾</li>
<li data-value="137">雞西</li>
<li data-value="138">鶴崗</li>
<li data-value="139">雙鴨山</li>
<li data-value="140">大慶</li>
<li data-value="141">伊春</li>
<li data-value="142">佳木斯</li>
<li data-value="143">七臺河</li>
<li data-value="144">牡丹江</li>
<li data-value="145">黑河</li>
<li data-value="146">綏化</li>
<li data-value="147">大興安嶺</li>
</ul>
</li>
<li><div data-value="10">上海</div>
<ul>
<li data-value="148">黃浦</li>
<li data-value="149">南區</li>
<li data-value="150">盧灣</li>
<li data-value="151">徐匯</li>
<li data-value="152">長寧</li>
<li data-value="153">靜安</li>
<li data-value="154">普陀</li>
<li data-value="155">閘北</li>
<li data-value="156">虹口</li>
<li data-value="157">楊浦</li>
<li data-value="158">閔行</li>
<li data-value="159">寶山</li>
<li data-value="160">嘉定</li>
<li data-value="161">浦東新區</li>
<li data-value="162">金山</li>
<li data-value="163">松江</li>
<li data-value="164">南匯</li>
<li data-value="165">奉賢</li>
<li data-value="166">青浦</li>
<li data-value="167">崇明</li>
</ul>
</li>
<li><div data-value="11">江蘇</div>
<ul>
<li data-value="168">南京</li>
<li data-value="169">無錫</li>
<li data-value="170">徐州</li>
<li data-value="171">常州 </li>
<li data-value="172">蘇州</li>
<li data-value="173">南通</li>
<li data-value="174">連雲港</li>
<li data-value="175">淮安 </li>
<li data-value="176">鹽城</li>
<li data-value="177">揚州</li>
<li data-value="178">鎮江</li>
<li data-value="179">秦州</li>
<li data-value="180">宿遷</li>
</ul>
</li>
<li><div data-value="12">浙江</div>
<ul>
<li data-value="181">杭州</li>
<li data-value="182">寧波</li>
<li data-value="183">溫州</li>
<li data-value="184">嘉興</li>
<li data-value="185">湖州</li>
<li data-value="186">紹興</li>
<li data-value="187">金華</li>
<li data-value="188">衡州</li>
<li data-value="189">舟山</li>
<li data-value="190">台州</li>
<li data-value="191">麗水</li>
</ul>
</li>
<li><div data-value="13">安徽</div>
<ul>
<li data-value="192">合肥</li>
<li data-value="193">蕪湖</li>
<li data-value="194">蚌埠</li>
<li data-value="195">淮南</li>
<li data-value="196">馬鞍山</li>
<li data-value="197">淮北</li>
<li data-value="198">銅陵</li>
<li data-value="199">安慶</li>
<li data-value="200">黃山</li>
<li data-value="201">滁州</li>
<li data-value="202">阜陽</li>
<li data-value="203">宿州</li>
<li data-value="204">巢湖</li>
<li data-value="205">六安</li>
<li data-value="206">毫州</li>
<li data-value="207">池州</li>
<li data-value="208">宣城</li>
</ul>
</li>
<li><div data-value="14">福建</div>
<ul>
<li data-value="209">福州</li>
<li data-value="210">廈門</li>
<li data-value="211">莆田</li>
<li data-value="212">三明</li>
<li data-value="213">泉州</li>
<li data-value="214">漳州</li>
<li data-value="215">南平</li>
<li data-value="216">龍巖</li>
<li data-value="217">寧德</li>
</ul>
</li>
<li><div data-value="15">江西</div>
<ul>
<li data-value="218">南昌</li>
<li data-value="219">景德鎮</li>
<li data-value="220">萍鄉</li>
<li data-value="221">九江</li>
<li data-value="222">新餘</li>
<li data-value="223">鷹潭</li>
<li data-value="224">贛州</li>
<li data-value="225">吉安</li>
<li data-value="226">宜春</li>
<li data-value="227">撫州</li>
<li data-value="228">上饒</li>
</ul>
</li>
<li><div data-value="16">山東</div>
<ul>
<li data-value="229">濟南</li>
<li data-value="230">青島</li>
<li data-value="231">淄博</li>
<li data-value="232">棗莊</li>
<li data-value="233">東營</li>
<li data-value="234">煙臺</li>
<li data-value="235">濰坊</li>
<li data-value="236">濟寧</li>
<li data-value="237">泰安</li>
<li data-value="238">威海</li>
<li data-value="239">日照</li>
<li data-value="240">萊蕪</li>
<li data-value="241">臨沂</li>
<li data-value="242">德州</li>
<li data-value="243">聊城</li>
<li data-value="244">濱州</li>
<li data-value="245">菏澤</li>
</ul>
</li>
<li><div data-value="17">河南</div>
<ul>
<li data-value="246">鄭州</li>
<li data-value="247">開封</li>
<li data-value="248">洛陽</li>
<li data-value="249">平頂山</li>
<li data-value="250">安陽</li>
<li data-value="251">鶴壁</li>
<li data-value="252">新鄉</li>
<li data-value="253">焦作</li>
<li data-value="254">濮陽</li>
<li data-value="255">許昌</li>
<li data-value="256">漯河</li>
<li data-value="257">三門峽</li>
<li data-value="258">南陽</li>
<li data-value="259">商丘</li>
<li data-value="260">信陽</li>
<li data-value="261">周口</li>
<li data-value="262">駐馬店</li>
<li data-value="263">潢川</li>
<li data-value="264">濟源</li>
</ul>
</li>
<li><div data-value="18">湖北</div>
<ul>
<li data-value="265">武漢</li>
<li data-value="266">黃石</li>
<li data-value="267">十堰</li>
<li data-value="268">仙桃</li>
<li data-value="269">宜昌</li>
<li data-value="270">襄陽</li>
<li data-value="271">鄂州</li>
<li data-value="272">荊門</li>
<li data-value="273">孝感</li>
<li data-value="274">荊州</li>
<li data-value="275">黃岡</li>
<li data-value="276">咸寧</li>
<li data-value="277">隨州</li>
<li data-value="278">江漢</li>
<li data-value="279">天門</li>
<li data-value="280">潛江</li>
<li data-value="281">神農架區</li>
<li data-value="282">恩施</li>
</ul>
</li>
<li><div data-value="19">湖南</div>
<ul>
<li data-value="283">長沙</li>
<li data-value="284">株洲</li>
<li data-value="285">湘潭</li>
<li data-value="286">衡陽</li>
<li data-value="287">邵陽</li>
<li data-value="288">常德</li>
<li data-value="289">張家界</li>
<li data-value="290">益陽</li>
<li data-value="291">郴州</li>
<li data-value="292">永州</li>
<li data-value="293">懷化</li>
<li data-value="294">婁底</li>
<li data-value="295">吉首</li>
<li data-value="296">湘西</li>
</ul>
</li>
<li><div data-value="20">廣東</div>
<ul>
<li data-value="297">廣州</li>
<li data-value="298">韶關</li>
<li data-value="299">深圳</li>
<li data-value="300">珠海</li>
<li data-value="301">汕頭</li>
<li data-value="302">佛山</li>
<li data-value="303">江門</li>
<li data-value="304">湛江</li>
<li data-value="305">茂名</li>
<li data-value="306">順德</li>
<li data-value="307">潮陽</li>
<li data-value="308">肇慶</li>
<li data-value="309">惠州</li>
<li data-value="310">梅州</li>
<li data-value="311">汕尾</li>
<li data-value="312">河源</li>
<li data-value="313">陽江</li>
<li data-value="314">清遠</li>
<li data-value="315">中山</li>
<li data-value="316">潮州</li>
<li data-value="317">揭陽</li>
<li data-value="318">雲浮</li>
</ul>
</li>
<li><div data-value="21">廣西</div>
<ul>
<li data-value="319">南寧</li>
<li data-value="320">柳州</li>
<li data-value="321">桂林</li>
<li data-value="322">梧州</li>
<li data-value="323">北海</li>
<li data-value="324">防城港</li>
<li data-value="325">欽州</li>
<li data-value="326">貴港</li>
<li data-value="327">玉林</li>
<li data-value="328">百色</li>
<li data-value="329">賀州</li>
<li data-value="330">河池</li>
<li data-value="331">來賓</li>
<li data-value="332">崇左</li>
</ul>
</li>
<li><div data-value="22">海南</div>
<ul>
<li data-value="333">海口</li>
<li data-value="334">三亞</li>
<li data-value="335">儋州</li>
<li data-value="336">文昌</li>
<li data-value="337">三沙地區</li>
<li data-value="338">瓊海</li>
</ul>
</li>
<li><div data-value="23">重慶</div>
<ul>
<li data-value="339">萬州</li>
<li data-value="340">涪陵</li>
<li data-value="341">渝中</li>
<li data-value="342">大渡口</li>
<li data-value="343">江北</li>
<li data-value="344">沙坪壩</li>
<li data-value="345">九龍坡</li>
<li data-value="346">南岸</li>
<li data-value="347">北碚</li>
<li data-value="348">萬盛</li>
<li data-value="349">雙橋</li>
<li data-value="350">渝北</li>
<li data-value="351">巴南</li>
<li data-value="352">長壽</li>
<li data-value="353">綦江</li>
<li data-value="354">潼南</li>
<li data-value="355">銅梁</li>
<li data-value="356">大足</li>
<li data-value="357">榮昌</li>
<li data-value="358">璧山</li>
<li data-value="359">梁平</li>
<li data-value="360">城口</li>
<li data-value="361">豐都</li>
<li data-value="362">墊江</li>
<li data-value="363">武隆</li>
<li data-value="364">忠縣</li>
<li data-value="365">開縣</li>
<li data-value="366">雲陽</li>
<li data-value="367">奉節</li>
<li data-value="368">巫山</li>
<li data-value="369">巫溪</li>
<li data-value="370">黔江</li>
<li data-value="371">石柱</li>
<li data-value="372">秀山</li>
<li data-value="373">酋陽</li>
<li data-value="374">彭水</li>
<li data-value="375">江津</li>
<li data-value="376">合川</li>
<li data-value="377">永川</li>
<li data-value="378">南川</li>
</ul>
</li>
<li><div data-value="24">四川</div>
<ul>
<li data-value="379">成都</li>
<li data-value="380">自貢</li>
<li data-value="381">攀枝花</li>
<li data-value="382">瀘州</li>
<li data-value="383">德陽</li>
<li data-value="384">綿陽</li>
<li data-value="385">廣元</li>
<li data-value="386">遂寧</li>
<li data-value="387">內江</li>
<li data-value="388">樂山</li>
<li data-value="389">南充</li>
<li data-value="390">眉山</li>
<li data-value="391">宜賓</li>
<li data-value="392">廣安</li>
<li data-value="393">達州</li>
<li data-value="394">雅安</li>
<li data-value="395">巴中</li>
<li data-value="396">資陽</li>
<li data-value="397">阿壩</li>
<li data-value="398">甘孜</li>
<li data-value="399">涼山</li>
</ul>
</li>
<li><div data-value="25">貴州</div>
<ul>
<li data-value="400">貴陽</li>
<li data-value="401">六盤水</li>
<li data-value="402">遵義</li>
<li data-value="403">安順</li>
<li data-value="404">興義</li>
<li data-value="405">凱里</li>
<li data-value="406">都勻</li>
<li data-value="407">銅仁</li>
<li data-value="408">黔西南</li>
<li data-value="409">畢節</li>
<li data-value="410">黔東南</li>
<li data-value="411">黔南</li>
</ul>
</li>
<li><div data-value="26">雲南</div>
<ul>
<li data-value="412">昆明</li>
<li data-value="413">怒江</li>
<li data-value="414">曲靖</li>
<li data-value="415">玉溪</li>
<li data-value="416">保山</li>
<li data-value="417">昭通</li>
<li data-value="418">麗江</li>
<li data-value="419">普洱</li>
<li data-value="420">臨滄</li>
<li data-value="421">版納</li>
<li data-value="422">楚雄</li>
<li data-value="423">紅河</li>
<li data-value="424">文山</li>
<li data-value="425">西雙版納</li>
<li data-value="426">大理</li>
<li data-value="427">德巨集</li>
<li data-value="428">怒江傈</li>
<li data-value="429">迪慶</li>
</ul>
</li>
<li><div data-value="27">西藏</div>
<ul>
<li data-value="430">拉薩</li>
<li data-value="431">昌都</li>
<li data-value="432">山南</li>
<li data-value="433">日喀則</li>
<li data-value="434">那曲</li>
<li data-value="435">阿里</li>
<li data-value="436">林芝</li>
</ul>
</li>
<li><div data-value="28">陝西</div>
<ul>
<li data-value="437">西安</li>
<li data-value="438">銅川</li>
<li data-value="439">寶雞</li>
<li data-value="440">咸陽</li>
<li data-value="441">渭南</li>
<li data-value="442">延安</li>
<li data-value="443">漢中</li>
<li data-value="444">榆林</li>
<li data-value="445">安康</li>
<li data-value="446">商洛</li>
</ul>
</li>
<li><div data-value="29">甘肅</div>
<ul>
<li data-value="447">蘭州</li>
<li data-value="448">嘉峪關</li>
<li data-value="449">金昌</li>
<li data-value="450">白銀</li>
<li data-value="451">天水</li>
<li data-value="452">武威</li>
<li data-value="453">張掖</li>
<li data-value="454">平京</li>
<li data-value="455">酒泉</li>
<li data-value="456">慶陽</li>
<li data-value="457">定西</li>
<li data-value="458">隴南</li>
<li data-value="459">臨夏</li>
<li data-value="460">甘南</li>
</ul>
</li>
<li><div data-value="30">青海</div>
<ul>
<li data-value="461">西寧</li>
<li data-value="462">格爾木</li>
<li data-value="463">海東</li>
<li data-value="464">海北</li>
<li data-value="465">黃南</li>
<li data-value="466">果洛</li>
<li data-value="467">玉樹</li>
<li data-value="468">海西</li>
</ul>
</li>
<li><div data-value="31">寧夏</div>
<ul>
<li data-value="469">銀川</li>
<li data-value="470">石嘴山</li>
<li data-value="471">吳忠</li>
<li data-value="472">固原</li>
<li data-value="473">中衛</li>
</ul>
</li>
<li><div data-value="32">新疆</div>
<ul>
<li data-value="474">烏魯木齊</li>
<li data-value="475">克拉瑪依</li>
<li data-value="476">奎屯</li>
<li data-value="477">吐魯番</li>
<li data-value="478">哈密</li>
<li data-value="479">昌吉</li>
<li data-value="480">博爾塔拉</li>
<li data-value="481">巴音郭楞</li>
<li data-value="482">阿克蘇</li>
<li data-value="483">克孜勒蘇</li>
<li data-value="484">喀什</li>
<li data-value="485">和田</li>
<li data-value="486">伊犁</li>
<li data-value="487">塔城</li>
<li data-value="488">阿勒泰</li>
<li data-value="489">石河子</li>
<li data-value="490">五家渠</li>
</ul>
</li>
<li><div data-value="33">臺灣</div>
<ul>
<li data-value="534">臺北</li>
<li data-value="535">新北</li>
<li data-value="536">桃園</li>
<li data-value="537">臺中</li>
<li data-value="538">臺南</li>
<li data-value="539">高雄</li>
</ul>
</li>
<li><div data-value="34">香港</div>
<ul>
<li data-value="540">中西區</li>
<li data-value="541">東區</li>
<li data-value="542">九龍城區</li>
<li data-value="543">觀塘區</li>
<li data-value="544">深水埗區</li>
<li data-value="545">黃大仙區</li>
<li data-value="546">灣仔區</li>
<li data-value="547">油尖旺區</li>
<li data-value="548">離島區</li>
<li data-value="549">葵青區</li>
<li data-value="550">北區</li>
<li data-value="551">西貢區</li>
<li data-value="552">沙田區</li>
<li data-value="553">屯門區 </li>
<li data-value="554">大埔區</li>
<li data-value="555">荃灣區</li>
<li data-value="556">元朗區</li>
</ul>
</li>
<li><div data-value="35">澳門</div>
<ul>
<li data-value="557">花地瑪堂區</li>
<li data-value="558">聖安多尼堂區</li>
<li data-value="559">大堂區</li>
<li data-value="560">望德堂區</li>
<li data-value="561">風順堂區</li>
<li data-value="562">嘉模堂區</li>
<li data-value="563">聖方濟各堂區</li>
<li data-value="564">路氹城</li>
</ul>
</li>
<li><div data-value="491">國外</div>
<ul>
<li data-value="492">澳大利亞</li>
<li data-value="493">加拿大</li>
<li data-value="494">英國</li>
<li data-value="495">日本</li>
<li data-value="496">新加坡</li>
<li data-value="497">德國</li>
<li data-value="498">法國</li>
<li data-value="499">韓國</li>
<li data-value="500">比利時</li>
<li data-value="501">紐西蘭</li>
<li data-value="502">瑞典</li>
<li data-value="503">瑞士</li>
<li data-value="504">荷蘭</li>
<li data-value="505">阿聯酋</li>
<li data-value="506">芬蘭</li>
<li data-value="507">丹麥</li>
<li data-value="508">泰國</li>
<li data-value="509">西班牙</li>
<li data-value="510">義大利</li>
<li data-value="511">挪威</li>
<li data-value="512">奧地利</li>
<li data-value="513">愛爾蘭</li>
<li data-value="514">馬來西亞</li>
<li data-value="515">奈及利亞</li>
<li data-value="516">俄羅斯</li>
<li data-value="517">巴西</li>
<li data-value="518">南非</li>
<li data-value="519">葡萄牙</li>
<li data-value="520">墨西哥</li>
<li data-value="521">印尼</li>
<li data-value="522">越南</li>
<li data-value="523">以色列</li>
<li data-value="524">科威特</li>
<li data-value="525">希臘</li>
<li data-value="526">匈牙利</li>
<li data-value="527">阿根廷</li>
<li data-value="528">印度</li>
<li data-value="529">柬埔寨</li>
<li data-value="530">菲律賓</li>
<li data-value="531">埃及</li>
<li data-value="532">土耳其</li>
<li data-value="533">其他</li>
</ul>
</li>
</ul>
這個列表比較長，結構看明白就好
JS部分：
$("#current-area").click(function () {
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/1i5qcrUt
http://pan.baidu.com/s/1bpC9g5p