JAreaSelect
/
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="assets/bootstrap.min.css">
    <title>地区选择插件</title>
    <script type="text/javascript" src="assets/jquery.min.js"></script>
    <script type="text/javascript" src="src/JAreaData.js"></script>
    <script type="text/javascript" src="src/JAreaSelect.js"></script>
    <script type="text/javascript" src="src/JAreaSelect2.js"></script>

    <style type="text/css">
        .form-control {
            margin-right: 5px;
        }
    </style>
</head>

<body>
<div class="container" style="padding-top: 20px;">
    <div class="alert alert-success" role="alert">
        <strong>传统表单 select UI 样式</strong>
    </div>
    <div id="area-select-box" class="form-inline"></div>

    <p><button class="btn btn-success" style="margin: 10px 0px;">获取地址</button></p>

    <div class="alert alert-danger" role="alert">
        <strong>仿京东 UI 样式</strong>
    </div>
    <p><button class="btn btn-danger">选择区域</button></p>
    <div id="area-select-box2"></div>
</div>

</body>
<script type="text/javascript">
    var area = $("#area-select-box").JAreaSelect({
	    prov : 1,
	    city : 72,
	    dist : 2839,
	    level : 3
    });

    $(".btn-success").on('click', function() {
        $(this).text(area.getAreaString());
    });

    $(".btn-danger").on("click", function() {
        $("#area-select-box2").JAreaSelect2({
            prov : 1,
            city : 72,
            dist : 2839,

            callback : function(data) {
                console.log(data);
                $(".btn-danger").html(data.address);
            }
        });
    });

</script>
</html>