省市级联下拉选择框

models.py

class Base():
    """
    基础类
    """

    def to_dict(self):
        """
        将实体对象转为json字典格式
        :return:
            {
                "attr": value
            }
        """
        return dict((col.name, getattr(self, col.name)) for col in class_mapper(self.__class__).mapped_table.c)


class Province(db.Model, Base):
    id = db.Column(db.Integer, primary_key=True)
    pname = db.Column(db.String(30))
    cities = db.relationship(
        "City",
        backref="province",
        lazy="dynamic"
    )


class City(db.Model, Base):
    id = db.Column(db.Integer, primary_key=True)
    cname = db.Column(db.String(30))
    pid = db.Column(db.Integer, db.ForeignKey('province.id'))

html/demo.html

<select id="selPro"></select>
<select id="selCity"></select>

javascript/demo.html

<script src="/static/js/common.js"></script>
<script src="/static/js/jquery-1.11.3.js"></script>
<script>
    function loadPro() {
        $.ajax({
            url: '/getPro',
            type: 'get',
            async: false,
            dataType: 'json',
            success: function (data) {
                var html = "";
                for(var i in data){
                    html += "<option value='"+data[i].id+"'>";
                    html += data[i].pname;
                    html += "</option>";
                }
                $("#selPro").html(html);
            }
        });
    }

    function loadCity(pid){
        $.ajax({
            url: '/getCity',
            type: 'get',
            data: 'pid='+pid,
            dataType: 'json',
            success: function (data) {
                var html = "";
                for(var i in data){
                    html += "<option value='"+data[i].id+"'>";
                    html += data[i].cname;
                    html += "</option>";
                }
                $("#selCity").html(html);
            }
        });
    }

    $(function () {
        loadPro();
        $("#selPro").change(function () {
            loadCity(this.value);
        });
        loadCity($("#selPro").val());
    });
</script>

javascript/common.js

function createXhr(){
	if (window.XMLHttpRequest)
	{
		return new XMLHttpRequest();
	}else{
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}

views.py

@main.route('/')
def index():
    return render_template('demo.html')


@main.route('/getPro')
def get_pro_view():
    provinces = Province.query.all()
    list = to_json_list(provinces)
    return json.dumps(list)


@main.route('/getCity')
def get_city_view():
    pid = request.args.get('pid')
    cities = City.query.filter_by(pid=pid).all()
    list = to_json_list(cities)
    return json.dumps(list)

common.py

def to_json_list(objs):
    """
    将多个实体对象转为json列表格式
    :return:
        [
            {
                "attr": value
            }
        ]
    """
    list = []
    for obj in objs:
        list.append(obj.to_dict())
    return list