JQuery는 지방 및 도시 드롭다운 상자의 연결 효과를 생성합니다_jquery

연결 효과를 수행하려면 순수 JavaScript를 사용하는 경우 새로 고쳐야 하는 결과 집합을 저장한 다음 이를 원본 페이지로 렌더링하기 위한 보조 페이지가 필요한 경우가 많습니다. 이전 드롭다운 상자 이후에 동적으로 새로 고쳐야 하는 콘텐츠를 자동으로 연결하는 것을 고려하세요. 현재 드롭다운 상자가 변경되면 동일한 수준의 모든 후속 드롭다운 상자가 지워지고 새로 고쳐진 콘텐츠가 다시 연결됩니다. . JQuery를 사용하여 구현하는 것이 더 쉽습니다. 코드는 지방 및 도시 연결 효과를 예로 사용하여 구현됩니다.

JSP 페이지 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

< ;li id="base">

출신지:

All

${provinceInfo.provinceName}

자바스크립트 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다:

functionrefreshCity(){
if($('#provinceCode').find('option:selected').val( ) == ""){
$('#provinceCode').parent().nextAll('lable').remove()
return;
}
//지방 이름
var ProvinceName = $('#provinceCode ').find('option:selected').text()
provinceName = ProvinceName.substring(0,provinceName.length-4)
//문제 하위 드롭다운 상자 옵션 데이터를 쿼리하기 위한 Json 요청
$.getJSON("<%=basePath%>baseInfo_getCitiesByProvinceId", {
proviceCode : $('#provinceCode').val()
}, function(data) {
// 하위 옵션이 있는 경우 하위 드롭다운 상자를 만듭니다.
if(data != null){
// 드롭 후 모든 형제 삭제 -down box parent
$(' #provinceCode').parent().nextAll('lable').remove()
var childId = "city"// 결정 다음 레벨 드롭다운 상자가 있는지 여부, 없으면 생성
if($('#' childId).length == 0){
//

ID를 추가하여
$( " ").appendTo($('#base'));
}else{
//하위 드롭다운 상자의 내용을 비웁니다
$('#' childId) .empty();
}
// json 문자열을 탐색하고 하위 드롭다운 상자 채우기
$ .each(data.city, function(i, item) {
$(' #' childId).append(
"" item.nameAndCode
"")
}); }
})
}


다음과 같이 지방에 따른 도시 코드를 가져옵니다.

코드 복사 코드는 다음과 같습니다. public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException , JSONEXCEPTION, IOEXception {

PROVINCEINFO PROVINCEINFO = This.ProvincityInfoservice .getProvincobaby ("Code", ProvicCode; list & lt; cityInfo & gt; cityList = this.ProvincityInfoservice.getCityListByproperty ("BelongprovindId", "BelongProvinceid", "" );

// Json 문자열을 다음으로 초기화합니다. 출력
String cityJson = "";
// 컬렉션을 탐색하고 json 문자열을 구성합니다.
if (cityList.size() > 0) {
cityJson = "{"city": [";
// 쿼리된 하위 항목 연결
for (int i = 0; i < cityList.size(); i ) {
CityInfo city = cityList.get(i);
String temp = "{"code":"" city.getCode()
"","nameAndCode":"" city.getName() "(" city.getCode () ")"
" "}";// 컬렉션의 마지막 항목인 경우 종결자를 연결하고, 그렇지 않으면 ","를 사용하여 구분합니다.
if (i == cityList.size( ) - 1) {
cityJson = cityJson temp "]}"
} else {
cityJson = cityJson temp ",";
}
}
}
/ / 출력 문자 집합을 설정하고 json 문자열을 입력하고 출력합니다.
response.setContentType("json")
response.getWriter().print(cityJson );