<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]
});