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