省市選擇

<li>
                <label>所屬省市:</label>
                <select  name="province" id="province" class="sec" onchange="showNext(this.value);">
                    <option value="">請選擇</option>
                    <c:choose>
                    <c:when test="${not empty provList}">
                        <c:forEach items="${provList}" var="prov">
  
                      <option value="${prov.area_id }" <c:if 
test="${prov.area_name == 
notice.province}">selected="selected"</c:if>>
                            ${prov.area_name}
                        </option>
                        </c:forEach>
                    </c:when>
                    </c:choose>
                </select>
            </li>
            <li><label>所屬城市:</label>
                <select name="city" id="city" class="sec">
  
                  <option value=""  <c:if test="${'' == 
notice.city or null == 
notice.city}">selected="selected"</c:if>>
                            請選擇
                    </option>
                    <c:choose>
                    <c:when test="${not empty cityList}">
                        <c:forEach items="${cityList}" var="city" >
  
                      <option value="${city.area_name }"  <c:if 
test="${city.area_name == 
notice.city}">selected="selected"</c:if>>
                            ${city.area_name }
                        </option>
                        </c:forEach>
                    </c:when>
                    </c:choose>
                </select>
            </li>


//聯動顯示城市下拉框
    function showNext(id){
        $("#city").empty();
        if(id!=null && id!=""){
            var url = "<%=path%>/area/sub.do?";
            $.ajax({   
                type : 'POST',   
                url : url,       
                   data :{    
                        "areaId":id
                }, 
                dataType: "json",
                success : function(data){
                    if(data.areaList.length>0){
                        $("#city").append("<option value=''>請選擇</option>");
                        $.each(data.areaList,function(i){
                            $("#city").append("<option value='"+this.area_name+"'>"+this.area_name+"</option>");
                        });
                    }else{
                        $("#city").append("<option value='-1'>無數據</option>");
                    }                
                },
                error : function(data){
                    alert("出現未知異常,請聯繫管理員");
                    return false;
                }  
            });    
        }else{
            $("#city").val("");
        }
    }
相關文章
相關標籤/搜索