<div class="wrap">
    <h2>新房列表</h2>
    <form id="scores-filter" method="POST">
        <!-- For plugins, we also need to ensure that the form posts back to our current page -->
        <input type="hidden" name="page" value="{{page}}"/>
        <select id="listCity" name="listCity">
            <option value="0"> 城市</option>
            {% for item in city %}
            <option {{ item.id == cityId ?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
            {% endfor %}
        </select>
        <select id="listDistrict" name="listDistrict">
            <option value="0">区域</option>
            {% if district %}
                {% for item in district %}
                    <option {{ item.id == districtId ?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
                {% endfor %}
            {% endif %}
        </select>
        <select  id="listPlate" name="listPlate">
            <option value="0">板块</option>
            {% if plate %}
                {% for item in plate %}
                    <option {{ item.id == plateId ?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
                {% endfor %}
            {% endif %}
        </select>
        <select id="totalPrice" name="totalPrice">
            <option value ="">价格</option>
            {% if dicTotalPrice %}
                {% for item in dicTotalPrice %}
                    <option {{ item.value == totalPrice ?"selected":"" }} value="{{ item.value }}">{{ item.value }}</option>
                {% endfor %}
            {% endif %}
        </select>
        <select id="room" name="room">
            <option value="0">类型</option>
            {% for item in room %}
            <option {{ item.id == roomId ?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
            {% endfor %}
        </select>
        <select id="buildProperty" name="buildProperty">
            <option value="0"> 房型</option>
            {% for item in buildProperty %}
            <option {{ item.id == buildPropertyId ?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
            {% endfor %}
        </select>
        <select id="acreage" name="acreage">
            <option value ="">面积</option>
            {% if acreage %}
                {% for item in dicArea %}
                    <option {{ item.value == acreage ?"selected":"" }} value="{{ item.value }}">{{ item.value }}</option>
                {% endfor %}
            {% endif %}
        </select>
        <select name="status" name="status">
            <option value="-1">状态</option>
            {% for item in status%}
            <option {{ item.id == statusId ?"selected":"" }} value="{{ item.id }}">{{ item.value }}</option>
            {% endfor %}
        </select>
        <input type="text" placeholder="请出入楼盘名" name="searchText">
        <input type="hidden" name="hasSearch" value="1"/>
        <input type="submit" id="submit" class="button action" value="搜索">
        <!-- Now we can render the completed list table -->
        {{function("addNewHouseTable")}}
    </form>
</div>
<script>
    (function ($) {
        $(document).ready(function(){
            $("#listCity").change(function(){
                var listCityId = $("#listCity").val();
                var district =$("#listDistrict");
                var acreage =$("#acreage");
                var totalPrice = $("#totalPrice");
                $('#listDistrict').find('option:not(:first-child)').remove();
                $('#listPlate').find('option:not(:first-child)').remove();
                $('#acreage').find('option:not(:first-child)').remove();
                $('#totalPrice').find('option:not(:first-child)').remove();
                $.ajax({
                    type: "GET",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=serachCity&cityId="+listCityId,
                    success:function(json){
                        addOption(json,district);
                    }
                });
                //面积
                $.ajax({
                    type: "GET",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=searchArea&cityId="+listCityId,
                    success:function(json){
                        for(var i = 0; i <=json.length-1; i++){
                            var id = json[i]["id"];
                            var value = json[i]["value"];
                            var Option = $("<option>").attr({"value": value}).append(value);
                            $("#acreage").append(Option);
                        }
                    }
                });
                //城市联动房子价格
                $.ajax({
                    type: "GET",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=searchTotalPrice&cityId="+listCityId,
                    success:function(json){
                        for(var i = 0; i <=json.length-1; i++){
                            var id = json[i]["id"];
                            var value = json[i]["value"];
                            var Option = $("<option>").attr({"value": value}).append(value);
                            $("#totalPrice").append(Option);
                        }
                    }
                });
            })

            $("#listDistrict").change(function(){
                var listCityId = $("#listCity").val();
                var listDistrict = $("#listDistrict").val();
                var listPlate = $("#listPlate");
                $('#listPlate').find('option:not(:first-child)').remove();
                $.ajax({
                    type: "GET",
                    url: "/tospur/wp-admin/admin-ajax.php",
                    data: "action=serachCity&cityId="+listCityId+"&districtId="+listDistrict,
                    success:function(json){
                        addOption(json,listPlate);
                    }
                });
            })

            function addOption(json,select){
                for(var i = 0; i <=json.length-1; i++){
                    var id = json[i]["id"];
                    var value = json[i]["value"];
                    var Option = $("<option>").attr({"value": id}).append(value);
                    select.append(Option);
                }
            }
        });
    })(jQuery);
</script>