版权声明:博客知识产权来源命运的信徒,切勿侵权 https://blog.csdn.net/qq_37591637/article/details/88983955
1、加入模块
2、res文件夹里面引入city.json
3、代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
body {}
button {
font-size: 15px;
width: 45%;
height: 30px;
border: 2px solid #008000;
border-radius: 4px;
background-color: #fff;
color: #008000;
margin-left: 5px;
margin-bottom: 5px;
}
button:hover {
color: #fff;
background-color: #008000;
border: 2px solid #fff;
}
</style>
</head>
<body> <input type="text" id="address" /><button onclick="fnopen()">请选择地址</button>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
fnopen()
};
function fnopen() {
var UIActionSelector = api.require('UIActionSelector');
UIActionSelector.open({
datas: 'widget://res/city.json',
layout: {
row: 5,
col: 3,
height: 30,
size: 12,
sizeActive: 14,
rowSpacing: 5,
colSpacing: 10,
maskBg: 'rgba(0,0,0,0.2)',
bg: '#008000',
color: '#fff',
colorActive: '#f00',
colorSelected: '#000'
},
animation: true,
cancel: {
text: '取消',
size: 12,
w: 90,
h: 35,
bg: '#fff',
bgActive: '#ccc',
color: '#888',
colorActive: '#fff'
},
ok: {
text: '确定',
size: 12,
w: 90,
h: 35,
bg: '#fff',
bgActive: '#ccc',
color: '#888',
colorActive: '#fff'
},
title: {
text: '请选择',
size: 12,
h: 44,
bg: '#eee',
color: '#888'
},
fixedOn: api.frameName
}, function(ret, err) {
if (ret) {
UIActionSelector.getActive(function(ret, err) {
if (ret) {
var pro=JSON.stringify(ret.level1);
pro=pro.substring(1,pro.length-1);
var city=JSON.stringify(ret.level2);
city=city.substring(1,city.length-1);
var x=JSON.stringify(ret.level3);
x=x.substring(1,x.length-1);
document.getElementById("address").value=pro+city+x;
}
});
}
});
}
</script>
</html>