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

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

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

首先是常用的日期使用：

HTML部分：

  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部分：

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

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

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

单项选择文本的

HTML部分：

  1. <li id="sex">
  2. <div class="mbase-menu-title">性别</div>
  3. <div class="mbase-menu-txt">未设置</div>
  4. <div class="clear"></div>
  5. </li>
  1. <ul id="sex-list" style="display: none">
  2. <li>先生</li>
  3. <li>女士</li>
  4. </ul>

JS部分：

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

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

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

下面这个是两列选择的：

HTML部分：

[html] view plain copy

  1. <li id="current-area">
  2. <div class="mbase-menu-title">现所在地</div>
  3. <div class="mbase-menu-txt">未设置</div>
  4. <div class="clear"></div>
  5. </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>

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

JS部分

  1. $("#current-area").click(function () {
  2. var that = this;
  3. $("#current-area-list").mobiscroll().treelist({
  4. theme: "android-ics",
  5. lang: "zh",
  6. display: ‘bottom‘,
  7. inputClass: ‘tmp‘,
  8. headerText: ‘请您选择‘,
  9. onSelect: function (valueText, inst) {
  10. console.log(valueText);
  11. var n = valueText.split(‘ ‘);
  12. var m1 = $(this).children("li").eq(n[0]).find("div").html();
  13. var m1_id = $(this).children("li").eq(n[0]).find("div").attr("data-value");
  14. var m2 = $(this).children("li").eq(n[0]).find("li").eq(n[1]).html();
  15. var m2_id = $(this).children("li").eq(n[0]).find("li").eq(n[1]).attr("data-value");
  16. console.log(m1);
  17. console.log(m2);
  18. console.log(m1_id);
  19. console.log(m2_id);
  20. /*$.post("inc/person.org.php", {apart: "resume_base", current_area: m1+m2, current_areaPID: m1_id, current_areaCID: m2_id}, function (result) {
  21. if (result == ‘ok‘) {
  22. $(that).find(".mbase-menu-txt").html(m1+m2);
  23. }
  24. else {
  25. error(‘网络繁忙，请您稍后再试‘);
  26. }
  27. });*/后端处理部分
  28. }
  29. });
  30. $("input[id^=current-area-list]").focus();
  31. });

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

至于三项选择的我还没用到，但应该是可以的，好久没写博客，可能写的很馄饨，有什么不明白的可以留言交流。

附上css、js文件：

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

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

时间： 2024-10-14 20:28:08

mobiscroll日期选择插件移动端插件文本选择插件的相关文章

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

推荐20款基于 jQuery &amp; CSS 的文本效果插件

jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件. 所以今天我们将展示一些很酷的文本效果插件,将帮助你为你的 Web 页面创建一些很酷的和动态的东西.这里是20个基于 jQuery & CSS 的文本效果插件. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件

转载：基于jquery的bootstrap在线文本编辑器插件Summernote

基于jquery的bootstrap在线文本编辑器插件Summernote 转载:jQ酷 » 基于jquery的bootstrap在线文本编辑器插件Summernote Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Opera.Internet Explorer 9 +(IE8支持即将到来). 特点: 世界上最好的WYSIWYG在线编辑器 极易安装

js文本复制插件&amp;vue

/* HTML: * <a href="javascript:;" class="copy" data-clipboard-text="copy"></a> */ $('.bdsharebuttonbox .copy').on('click', function (){ $(this).attr('data-clipboard-text',window.location.href); var clipboard = new

【实践】简洁大方的summernote 富文本编辑器插件的用发——实例篇

实例化后的summernote 是这样子的 很漂亮对吧,而我做成页面效果是这样的: 先说说实例化一个summernote 的方法把,其实也不难,jq 选择器选择一个要变成富文本编辑器的元素然后调用 summernote 方法传入一个对象作为参数便可,参数是一个对象,属性就是这个富文本的一些样式属性,如下: 上面的属性是一些比较常用的属性,更多属性可以查看官方文档.特别注意一点的是callbacks 属性,它的作用是summernote 编辑器里面的一些功能要实现的回调方法,这里我的需求只是上传图

hudson用SVN插件下载代码，用ant插件打包， 用SSH插件部署

hudson自动化部署步骤 1.SVN插件->下载代码 2.ant插件->war打包    (hudson服务器上可安装多个版本ant,每个项目可以选择一个ant版本.Build File:填写build.xml构建脚本路径) 3.SSH插件->shell脚本部署,重启tomcat 4.SSH插件讲解 4.1.远程服务器配置SSH Servers name : xxxx           host:192.168.0.2           user:root           re

[转载]通达信插件选股（基于通达信插件编程规范的简单分析）

[转载]通达信插件选股(基于通达信插件编程规范的简单分析) 原文地址:通达信插件选股(基于通达信插件编程规范的简单分析)作者:哈尔滨猫猫 首先声明,鄙人是编程人员,不是股民.对选股概念了解甚少.本文仅作编程人员学习借鉴之用.不对选股理论进行探讨和解释. 以前有客户找我做过通达信插件选股的小任务,当时第一次接触面向接口(此类“接口”)编程,也是第一次接触到股票里相关的概念.最近由于接手一个任务,与上次开发相类似,故旧事重提,仔细研究一番.将个人学习研究所得知识与大家分享.在网上搜相关资料,可用的.

Jenkins的插件管理（安装和更新插件）

使用Jenkins的编译部署项目需要依赖各种插件 下面安装Jenkins的各种插件: 1.登录Jenkins进入以下界面: 2.点击 系统管理 : 3.点击 管理插件 : 4.点击 可选插件 选择你需要安装的插件 4.1.如果你已经下载了插件可以在高级那里上传进行安装: 我已经这里已经安装的插件有(为了方便测试插件我基本都安装了):

十二款很不错的Chrome Cookie管理插件，开发者必备之cookie插件

Cookie是开发者最常用的的功能了,本文介绍了Chrome商店中常用的一些cookie chrome插件,一共十二款chrome cookie插件,做一个图文集合,供开发者们参考学习,本站收集了全球所有的cookie开发者插件,中文翻译是由GOOGLE翻译完成的,请大家重点使用插件的下载功能,感谢! Cookie Killer for Facebook Chrome插件 保持Facebook的Facebook.com上.当你登出, Facebook的cookie被杀死,这样你,你遍历网页不被跟

WorldWind源码剖析系列：插件列表视图类PluginListView和插件列表视图项类PluginListItem

WorldWind中的插件类是个庞大的类,可以说从软件设计层面上统筹可扩展的插件体系的设计思想是WorldWind中的精华,值得学习和借鉴.插件体系中的所用到的类可以分为两大类,一类是插件类Plugin及其派生类,另外一类是插件类中的界面类,如PluginDialog.PluginInstallDialog.插件列表视图类PluginListView和插件列表视图项类PluginListItem等.这些类之间的关联关系图如下所示.本节主要介绍插件类中的界面类. 插件列表视图类PluginList