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

一开始是弄个日期选择的插件，网上看到这个mobiscroll这个插件，然后各种下各种找demo，最后自己研究了一天下面把自己项目的demo拔出来分享给大家（以及文件下载），多多海涵，如果大家看了我的这文章有更好的写法还望赐教~

首先是常用的日期使用：

HTML部分：

<li id="birthday">
<div class="mbase-menu-title">生日</div>
<div
class="mbase-menu-txt">未设置</div>
<div class="clear"></div>
</li>

JS部分：

$("#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(‘网络繁忙，请您稍后再试‘);
}
});*/ 这是后端入库部分
}
});

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

技术分享

下面的是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部分：

[javascript] view plain copy

$("#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();
});

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

[javascript] view plain copy

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

[javascript] view plain copy

这因情况而异，后面那段<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部分：

[html] view plain copy

<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

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

mobiscroll日期选择插件移动端插件文本选择插件

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > mobiscroll日期选择插件移动端插件文本选择插件

mobiscroll日期选择插件移动端插件文本选择插件

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

看完仍有疑问？有类似问题直接问程序猿