1 번 select 박스 2 번 select 박스
요런식으로 나열되어 있을때 1번 select 박스가 변경 되면 2번 select 박스 내용이
변경 되어야 하는 경우가 있다
예를 들면
1번 select 박스에 서울, 경기도... 등의 option 선택지가 있고
2번 select 박스는 서울 - 서초,강남,송파, 경기도 - 하남, 구리... 등의 선택지가 나오는
경우 이다.
test.jsp 에서 선택을 하면 test1.jsp 에서 select 박스를 만들어서 뿌려주는 방식을 선택하였다
jquery 공부도 할겸 겸사 겸사로 좋은 예제를 만들어본 것 같다.
//test.jsp
==============================================================================
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script>
function sub(){
var x = f.sel1.value;
$.ajax({
type: "POST",
url: "test1.jsp",
data: "region="+x, //&a=xxx 식으로 뒤에 더 붙이면 됨
success: result //function result 를 의미함
}
);
}
function result(msg){
//sub()가 실행되면 결과 값을 가지고 와서 action 을 취해주는 callback 함수
var sel = document.f.sel2;
$("#sp1").html(msg); //innerHTML 을 이런 방식으로 사용함
//id 는 $("#id") name 의 경우 $("name") 으로 접근함
}
</script>
<script src="../js/jquery-1.4.4.min.js"></script>
</head>
<body>
<form name="f">
<select name="sel1" onchange="sub();">
<option value="">선택하세요</option>
<option value="seoul">서울</option>
<option value="kyung">경기</option>
</select>
<span id="sp1">
<select name="sel2">
<option value="">선택하세요</option>
</select>
</span>
</form>
</body>
</html>
==============================================================================
//test1.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%
String region = request.getParameter("region");
out.println("<select name='sel2'>");
if(region.equals("seoul")){
out.println("<option value=''>선택하세요</option> ");
out.println("<option value='seocho'>서초</option> ");
out.println("<option value='gangnam'>강남</option> ");
}else{
out.println("<option value=''>선택하세요</option> ");
out.println("<option value='guri'>구리</option> ");
out.println("<option value='hanam'>하남</option> ");
}
out.println("</select>");
%>
댓글