gzf/WebRoot/ui/house.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" %>
<%@ page language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";


%>

<jsp:include page="header.jsp"></jsp:include>
<style>
.breadcrumb-area{position:relative}
.breadcrumb-area:before{
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    background: linear-gradient(45deg, rgb(240, 100, 150), rgb(140, 200, 208));
    opacity: .7;
    -webkit-transition: .4s;
    transition: .4s;
}
</style>


<!-- Breadcrumb -->
<div class="breadcrumb-area section"
style="background:url(<%=basePath %>static/breadcrumb.jpg);"
>
    <div class="container">
        <div class="breadcrumb pt-75 pb-75 pt-sm-70 pb-sm-40 pt-xs-70 pb-xs-40">
            <div class="row">
                <div class="col">
                    <h2>房源查询</h2>
                    <!-- breadcrumb-list start -->
                    <ul class="breadcrumb-list">
                        <li class="breadcrumb-item"><a href="">首页</a></li>
                        <li class="breadcrumb-item active">房源</li>
                    </ul>
                    <!-- breadcrumb-list end -->
                </div>
            </div>
        </div>
    </div>
</div>
<!--// Breadcrumb -->

<!-- Page Conttent -->
<main class="page-content section">
    <!-- Featured Properites Start -->
    <div  class="featured-properites-section section pt-110 pt-md-90 pt-sm-70 pt-xs-60 pb-110 pb-md-90 pb-sm-70 pb-xs-60">
        <div class="container">

			<!-- 搜索框 -->

			<form role="form" action="<%=basePath %>app/house.do" method="post" autocomplete="off">
				<div class="row clearfix" style="margin-bottom: 50px">
					<div class="col-md-11 column">
						<input class="form-control input-lg " name="housequerystr" type="text"
							placeholder="搜索房源">
					</div>
					<div class="col-md-1 column">
						<button type="submit" class="btn btn-primary">查询</button>
					</div>
				</div>
			</form>


			<div class="row">
				<div class="col">
					<ul class="properties-list nav justify-content-end" role="tablist">


						<li class="active"><a class="active" href="#all" role="tab"
							data-toggle="tab">ALL</a></li>
						<li><a href="#buy" role="tab" data-toggle="tab">可用</a></li>
						<li><a href="#buy1" role="tab" data-toggle="tab">已租赁</a></li>
					</ul>
				</div>
			</div>

			<div class="row" style="margin-top: 10px">
				<div class="col">
				<ul class="properties-list nav justify-content-end" role="tablist">
				<li><select style="width: 100px;" id="province" name="pid"
							class="form-control">
								<option selected="selected" value="">请选择</option>
								<option value="2">北京</option>
								<option value="3">安徽</option>
								<option value="4">福建</option>
								<option value="5">甘肃</option>
								<option value="6">广东</option>
								<option value="7">广西</option>
								<option value="8">贵州</option>
								<option value="9">海南</option>
								<option value="10">河北</option>
								<option value="11">河南</option>
								<option value="12">黑龙江</option>
								<option value="13">湖北</option>
								<option value="14">湖南</option>
								<option value="15">吉林</option>
								<option value="16">江苏</option>
								<option value="17">江西</option>
								<option value="18">辽宁</option>
								<option value="19">内蒙古</option>
								<option value="20">宁夏</option>
								<option value="21">青海</option>
								<option value="22">山东</option>
								<option value="23">山西</option>
								<option value="24">陕西</option>
								<option value="25">上海</option>
								<option value="26">四川</option>
								<option value="27">天津</option>
								<option value="28">西藏</option>
								<option value="29">新疆</option>
								<option value="30">云南</option>
								<option value="31">浙江</option>
								<option value="32">重庆</option>
								<option value="33">香港</option>
								<option value="34">澳门</option>
								<option value="35">台湾</option>
						</select></li>
						<li><select style="width: 150px;" id="city" name="cid"
							class="form-control">
							<option selected="selected" value="">请选择</option>
						</select></li>
						<li><select style="width: 150px;" id="area" name="aid"
							class="form-control">
							<option selected="selected" value="">请选择</option>
						</select></li>
					</ul>
				</div>
			</div>

			<div class="tab-content">
                <div class="tab-pane active" id="all">
                    <div class="row">

                         <c:forEach items="${hs}" var="item" varStatus="x">
                        <div class="col-lg-3 col-md-4 col-12">
                            <!-- single-property Start -->
                            <div class="single-property mt-30">
                                <div class="property-img">
                                    <a href="<%=basePath %>app/detail.do?id=${item.id}">
                                    <img src="<%=basePath %>${item.thunb}" alt="">
                                </a>
                                    <span class="level-stryker">
                                    <c:if test="${item.state==1 }">闲置</c:if>
                                <c:if test="${item.state==2 }">使用中</c:if> 
                                    </span>
                                </div>
                                <div class="property-desc">
                                    <h4>
                                    <a href="<%=basePath %>app/detail.do?id=${item.id}">${item.communityName}</a>
                                    </h4>
                                    <p>
                                        <span class="location">
                                        ${item.address}</span>
                                        <span class="property-info"> 发布 ${item.created}
                                            <em>
                                            ${item.cate }
                                            </em>
                                        </span>
                                    </p>
                                    <div class="price-box">
                                        <p>${item.price}元/月</p>
                                    </div>
                                </div>
                            </div><!-- single-property End -->
                        </div>
                        </c:forEach>





                    </div>
                </div>
                <div class="tab-pane" id="buy">
                    <div class="row">

                        <c:forEach items="${hs}" var="item" varStatus="x">
                        <c:if test="${item.state==1 }">
                        <div class="col-lg-3 col-md-4 col-12">
                            <!-- single-property Start -->
                            <div class="single-property mt-30">
                                <div class="property-img">
                                    <a href="<%=basePath %>app/detail.do?id=${item.id}">
                                    <img src="<%=basePath %>${item.thunb}" alt="">
                                </a>
                                    <span class="level-stryker">
                                    <c:if test="${item.state==1 }">闲置</c:if>
                                <c:if test="${item.state==2 }">使用中</c:if> 
                                    </span>
                                </div>
                                <div class="property-desc">
                                    <h4>
                                    <a href="<%=basePath %>app/detail.do?id=${item.id}">${item.rooname} </a>
                                    </h4>
                                    <p>
                                    <span class="location">
                                    ${item.address}</span>
                                    <span class="property-info"> 发布 ${item.created}
                                    	<em>
                                    	${item.cate }
                                    	</em>
                                    </span>
                                </p>
                                <div class="price-box">
                                    <p>${item.price}元/月</p>
                                </div>
                                </div>
                            </div><!-- single-property End -->
                        </div></c:if>
                        </c:forEach>





                    </div>
                </div>


                <div class="tab-pane" id="buy1">
                    <div class="row">

                        <c:forEach items="${hs}" var="item" varStatus="x">
                        <c:if test="${item.state==2 }">
                        <div class="col-lg-3 col-md-4 col-12">
                            <!-- single-property Start -->
                            <div class="single-property mt-30">
                                <div class="property-img">
                                    <a href="<%=basePath %>app/detail.do?id=${item.id}">
                                    <img src="<%=basePath %>${item.thunb}" alt="">
                                </a>
                                    <span class="level-stryker">
                                    <c:if test="${item.state==1 }">闲置</c:if>
                                <c:if test="${item.state==2 }">使用中</c:if> 
                                    </span>
                                </div>
                                <div class="property-desc">
                                    <h4>
                                    <a href="<%=basePath %>app/detail.do?id=${item.id}">${item.rooname} </a>
                                    </h4>
                                    <p>
                                    <span class="location">
                                    ${item.address}</span>
                                    <span class="property-info"> 发布 ${item.created}
                                    	<em>
                                    	${item.cate }
                                    	</em>
                                    </span>
                                </p>
                                <div class="price-box">
                                    <p>${item.price}元/月</p>
                                </div>
                                </div>
                            </div><!-- single-property End -->
                        </div></c:if>
                        </c:forEach>





                    </div>
                </div>



            </div>




        </div>
    </div><!-- Featured Properites End -->
</main>
<!--// Page Conttent -->



<jsp:include page="footer.jsp"></jsp:include>
<script type="text/javascript">
$(document).ready(function(){
	// loadRegion("province",1);
    //loadRegion("city",2);
     // loadRegion("area",52);

       $("#province,#city").change(function(){
           //sel = $(this).next("select").attr("id");
           var v_t=$(this).attr("id");
           if (v_t=='province') {
        	   loadRegion('city',$(this).val());
		   }
           if (v_t=='city') {
        	   loadRegion('area',$(this).val());
		   }


       });

       $('#area').change(function(){
    	   window.location.href = "<%=basePath%>app/house.do?areaid="+$('#area').val();
       });
})

       function loadRegion(sel,parentId)
       {
       	//sel=="city"?$("#area").html(""):false
       	$("#"+sel).html("");
       	$.get("<%=basePath%>rg.sl?flag=1&id="+parentId,function(e){
       	$("#"+sel).html(e);
       	sel=="city"?reload():false;
       	})
       }
       function reload()
       {
       	 	sel = "area";
        	loadRegion(sel,$("#city").val());
       }


</script>