移動端省際聯動插件mobiscroll

<link href="assets/css/mobiscroll.custom-2.17.0.min.css" rel="stylesheet" type="text/css" />

<script src="assets/js/mobiscroll.custom-2.17.0.min.js" type="text/javascript"></script>

//html

<ol class="treelist-sex" id="menusex">
?? ??? ??? ??? ?<li>男</li>
?? ??? ??? ??? ?<li>女</li>
?? ??? ??? ?</ol>

??? <select id="demo" class="all_width ">
?? ??? ??? ?<optgroup label="濟南">
?? ??? ??? ??? ?<option value="1">歷下區</option>
?? ??? ??? ??? ?<option value="2">市中區</option>
?? ??? ??? ??? ?<option value="3">天橋區</option>
?? ??? ??? ??? ?<option value="4" selected="selected">歷城區</option>
?? ??? ??? ?</optgroup>

?? ??? ??? ?<optgroup label="濱州">
?? ??? ??? ??? ?<option value="15">濱城區</option>
?? ??? ??? ??? ?<option value="16">西海區</option>
?? ??? ??? ?</optgroup>
?? ??? ?</select>

?

//js

$('.treebutton-sex').click(function() {
?? ??? ??? ??? ??? ?$('.treelist-sex').mobiscroll('show');
?? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ?});
?? ??? ??? ??? ?$(".treelist-sex").mobiscroll().treelist({
?? ??? ??? ??? ??? ?theme: "mobiscroll",
?? ??? ??? ??? ??? ?display: 'bottom',
?? ??? ??? ??? ??? ?lang: "zh",
?? ??? ??? ??? ?});

// js 地址選擇控件(可顯示多行)
?? ??? ??? ??? ?$('#city-picker').click(function() {
?? ??? ??? ??? ??? ?$('#demo').mobiscroll('show');
?? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ?});
$('#demo').mobiscroll().select({
?? ?theme: 'mobiscroll',
?? ?display: 'bottom',
?? ?label: 'City',
?? ?lang: "zh",
?? ?group: true,
?? ?groupLabel: 'Country',

//不允許右側控制左側

group: {
??? clustered: true
}
?? ?//選擇表單展現的樣式
?? ?inputClass:"all_width text-right clear_border"
//? fixedWidth: [100, 170]
});

轉載于:https://www.cnblogs.com/xiaoleiel/p/8316452.html

總結

以上是生活随笔為你收集整理的移动端省际联动插件mobiscroll的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。