js实现省市区的三级联动

HTML代码

<div class="form-group">
				<label class="col-sm-3 control-label">省市区：</label>
				<div class="col-sm-2">
					<select id="province" name="province" class="form-control" "getListByOption()">
						<option value="">所在省</option>
						<option th:each="obj : ${sheng}" th:text="${obj.name}" th:value="${obj.id}"></option>
					</select>
				</div>
				<div class="col-sm-2">
					<select id="city" name="city" class="form-control" "getListByChildOption()">
						<option value="">所在市</option>
					</select>
				</div>
				<div class="col-sm-2">
					<select id="county" name="county" class="form-control">
						<option value="">所在区</option>
					</select>
				</div>
			</div>

JS代码

<script type="text/javascript">
		var prefix = ctx + "module/saler";
        function getListByOption() {
            var $select = $("#city");
            $select.empty();   //置空避免重复加载
            var parent = $("#province").val();
            $.ajax({
                url: "/saler/area",
                data: {
                    "parent": parent,
					"level":"2"
                },
                type: "GET",
                success: function (data) {
                    if (data.length != 0) {
                        for (var i in data) {
                            var name = data[i].name;
                            var $option = $("<option value='"+ data[i].id +"'>"+name+"</option>");
                            $option.appendTo($select);
                        }
                        getListByChildOption();
                    }
                }
            })
        }

        function getListByChildOption() {
            var $selectChild = $("#county");
            $selectChild.empty();
            debugger
            var parent = $("#city").val();

            console.log(parent)
            $.ajax({
                url: "/saler/area",
                data: {
                    "parent": parent,
                    "level":"3"
                },
                type: "GET",
                success: function (data) {
                    if (data.length != 0) {
                        for (var i in data) {
                            var name = data[i].name;
                            var $option = $("<option value='"+ data[i].id +"'>"+name+"</option>");
                            $option.appendTo($selectChild);
                        }
                    }
                }
            })
        }
	</script>

效果图