공개 게시판 > 공부

Business
- Business
Information
- Information
Study
- IONIC REACT PHP GNU MySQL ASP .NET MsSQL Html CSS Script SEO DNS JQuery Eng
book
- book
free
- free

:: 글답변 ::

이 름

패스워드

이메일

홈페이지

옵 션

html

분 류

제 목

>
>
> 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>");
> %>
>

링크 #1

링크 #2

파일첨부

왼쪽의 글자를 입력하세요.