前端.省市级联框

var codeurl = ctx + "system/districts/list"

//债务人省份
        $(function() {
            // 初始化省市区
            initAddress("#obligorLocation","#obligorCity");
            // 更改省份后的操作
            $("#obligorLocation").change(function() {
                var provCode = $("#obligorLocation").val();
                getCity(provCode,"#obligorCity");
            });
        });
        function initAddress(province,city) {
            var firstProvCode;
            // ajax请求所有省份
            //$(province).empty();
            $(province).append("<option value=''>-- 选择省 --</option>");
            $.post(codeurl, {
                pid : 0
            }, function(data) {
                $.each(data.rows,
                        function(i, d) {
                            $(province).append(
                                    "<option value='"+d.id+"'>" + d.extName
                                            + "</option>");
                        });
                firstProvCode = data.rows[0].id;
                // 根据第一个省份code获取对应城市列表
                getCity(firstProvCode,city);
            }, 'json');
        }
        //获取对应城市列表（里面包括获取第一个城市的区县列表）
        function getCity(provCode,city) {
            // ajax请求所有市级单位
            $.post(codeurl, {
                pid : provCode
            }, function(data) {
                // 先清空城市下拉框
                $(city).empty();
                $(city).append("<option value=''>-- 选择市 --</option>");
                $.each(data.rows,
                        function(i, d) {
                            $(city).append(
                                    "<option value='"+d.id+"'>" + d.extName
                                            + "</option>");
                        });
            }, 'json');
        }
        
        

<div class="form-group">
<label class="col-sm-2 control-label">债务人所在区域:</label>
<div class="form-inline col-sm-4">
<!-- <input id="obligorLocation" name="obligorLocation" class="form-control" required type="text"> -->
<select id="obligorLocation" name="obligorLocation" class="form-control">
</select>
<select id="obligorCity" name="obligorCity" class="form-control">
</select>
</div>
</div>