Apicloud实现三级联动（省、市、区县）效果

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>
Apicloud实现三级联动（省、市、区县）效果

猜你喜欢
