实现列表时的多个检索条件

效果图

下面是jsp实现代码

 <div class="selectedOPArea" id="selectedOPArea">已选条件：</div>
			 <div class="selectOPArea" id="selectOPArea">
			      <div style="border-top:0;">招聘地区：
			        <ul data-index=0 data-view=1>
			          <li class="selectedOP">${expertOrderSquareInfo.searchCityName}</li>
		           	  <c:forEach items="${expertOrderSquareInfo.searchCityAreaList}" var="cityList">
				          <li data-factoryid="12">${cityList}</li>
			          </c:forEach>
			        </ul>
			      </div>
			      <div>年龄范围：
			        <ul data-index=1 data-view=1>
			          <li class="selectedOP">全部</li>
			          <c:forEach items="${expertOrderSquareInfo.searchAgeRangeList}" var="ageRangeList">
				          <li>${ageRangeList}岁</li>
			          </c:forEach>
			        </ul>
			      </div>
			      <div>性别选择：
			        <ul data-index=2 data-view=1>
			          <li class="selectedOP">全部</li>
			          <c:forEach items="${expertOrderSquareInfo.searchSexList}" var="sexList">
				          <li>${sexList}</li>
			          </c:forEach>
			        </ul>
			      </div>
			      <div>排　　序：
			        <ul data-index=3 data-view=0>
			          <c:forEach items="${expertOrderSquareInfo.searchOrderStyleList}" var="orderStyleList" varStatus="status">
			            <c:if test="${status.index eq 0}">
				          <li class="selectedOP">${orderStyleList}</li>
				        </c:if>
				        <c:if test="${status.index ne 0}">
				          <li>${orderStyleList}</li>
				        </c:if>
			          </c:forEach>
			        </ul>
			    </div>
下面是各种css设置

.selectOPArea {
    margin-left: 20px;
    margin-right: 50px;
    background-color: #ffffff;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px !important;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    color: #999999;
    padding-top: 1px;
    padding-bottom: 1px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.selectOPArea div ul {
    display: inline-block;
    padding-left: 0;
    margin-bottom: 0;
}

.selectOPArea div {
    height: 30px;
    line-height: 30px;
    margin-left: 10px;
    margin-right: 10px;
    border-top: 1px solid #E9E9E9;
}