잡동사니에도 사랑을

[21.10.19] exam03(01_helloAjax) 본문

JAVA_EE/AJAX

[21.10.19] exam03(01_helloAjax)

luvforjunk 2021. 10. 19. 12:59
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
form>span {
	display: none;
}
</style>
</head>
<body>
<h1 class="title">동적 드롭다운</h1> <!-- 년을 누르면 월이 튀어나오고 월을 누르면 일이 튀어나오는 -->
<div class="exec">
   <form>
        <!-- 각 단계별 dropdown을 표시할 span태그 -->
        <span id="category1"></span>
        <span id="category2"></span>
        <span id="category3"></span>
    </form>
</div>

<div class="console"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 1 depth
	$('#category1').load("../text/category-data.html #category1-1", function(){
		$(this).show();
	}); 
	
	// 2 depth
	$(document).on('change', '#category1 > select', function(){ 
		/* 카테고리2에 들어갈 내용은 앞에서 어떠한 것을 선택했느냐에 따라 달라진다 */
		
		// 초기화
		$('#category2').empty().hide(); 
		$('#category3').empty().hide();
		
		var target = $(this).find('option:selected').attr('data-target');
		console.log(target);
		
		$('#category2').load("../text/category-data.html " + target, function(){
			$(this).show();
		});
	});
	
	// 3 depth
	$(document).on('change', '#category2 > select', function(){
		// 초기화
		$('#category3').empty().hide();
		
		var target = $(this).find('option:selected').attr('data-target');
		console.log(target);
		
		var selector = "../text/category-data.html " + target;
		$('#category3').load(selector, function(){
			$(this).show();
		});
	});
	
	// 마지막 선택
	$(document).on('change', '#category3 > select', function(){
		if($(this).find('option:selected').index() > 0){
			var data1 = $('#category1 > select > option:selected').val();
			var data2 = $('#category2 > select > option:selected').val();
			var data3 = $(this).find('option:selected').val();
				
			$('.console').html(data1 + " &gt; " + data2 + " > " + data3);	
		}
	});	
});
</script>
</body>
</html>

<!-- 
* load()
읽어오고자 하는 대상의 내용이 단순한 text나 html 태그를 표현하며 
읽어온 내용을 특정 요소에 출력하는 것만을 목적으로 할 경우 load() 함수를 사용해 코드를 축약할 수 있다.

$("CSS셀렉터").load(
   "읽어올 대상의 URL" 
   [, function() { ...읽기에 성공한 후 실행될 함수...}]   
);

예) "readme.html" 파일의 전체 내용 중에서 "#my"라는 id값을 갖는 요소만을 읽어올 경우
$(“출력할 대상의 셀렉터”).load("readme.html #my");
 -->

 

 

 

////////category-data.html

<!-- 1depth 카테고리 -->
<select name="category1" id="category1-1">
  <option>----- 선택하세요 -----</option>
  <option value="의류" data-target="#category2-1">의류</option>
  <option value="디지털/가전" data-target="#category2-2">디지털/가전</option>
</select>

<!-- 의류에 종속된 2depth 카테고리 -->
<select name="category2" id="category2-1">
  <option>----- 선택하세요 -----</option>
  <option value="여성의류" data-target="#category2-1-1">여성의류</option>
  <option value="남성의류/캐주얼의류" data-target="#category2-1-2">남성의류/캐주얼의류</option>
</select>

<!-- 디지털/가전 2depth 카테고리 -->
<select name="category2" id="category2-2">
  <option>----- 선택하세요 -----</option>
  <option value="TV/냉장고/세탁기" data-target="#category2-2-1">TV/냉장고/세탁기</option>
  <option value="노트북/데스크탑" data-target="#category2-2-2">노트북/데스크탑</option>
</select>

<!-- 의류 > 여성의류에 종속된 3depth 카테고리 -->
<select name="category3" id="category2-1-1">
  <option>----- 선택하세요 -----</option>
  <option value="티셔츠">티셔츠</option>
  <option value="블라우스/셔츠/남방">블라우스/셔츠/남방</option>
  <option value="가디건">가디건</option>
  <option value="니트/스웨터">니트/스웨터</option>
</select>

<!-- 의류 > 남성의류/캐주얼의류에 종속된 3depth 카테고리 -->
<select name="category3" id="category2-1-2">
  <option>----- 선택하세요 -----</option>
  <option value="캐주얼셔츠/남방">캐주얼셔츠/남방</option>
  <option value="긴팔티/맨투맨신규코너">긴팔티/맨투맨신규코너</option>
  <option value="청바지인기코너">청바지인기코너</option>
  <option value="캐주얼 바지/팬츠">캐주얼 바지/팬츠</option>
</select>

<!-- 디지털/가전 > TV/냉장고/세탁기에 종속된 3depth 카테고리 -->
<select name="category3" id="category2-2-1">
  <option>----- 선택하세요 -----</option>
  <option value="3D TV">3D TV</option>
  <option value="김치냉장고">김치냉장고</option>
  <option value="드럼세탁기">드럼세탁기</option>
</select>

<!-- 디지털/가전 > 노트북/데스크탑에 종속된 3depth 카테고리 -->
<select name="category3" id="category2-2-2">
  <option>----- 선택하세요 -----</option>
  <option value="노트북">노트북</option>
  <option value="브랜드PC">브랜드PC</option>
  <option value="조립PC">조립PC</option>
</select>
728x90
반응형

'JAVA_EE > AJAX' 카테고리의 다른 글

[21.10.20] exam02(02_xml)  (0) 2021.10.20
[21.10.19] exam01(02_xml) - Ajax를 이용해 XML불러오기  (0) 2021.10.19
[21.10.19] exam04(01_helloAjax) - JSON형식 불러오기  (0) 2021.10.19
[21.10.19] exam02(01_helloAjax) - Ajax를 활용하여 HTML파일 내용 읽기  (0) 2021.10.19
[21.10.19] exam01(01_helloAjax) - Ajax활용하여 txt파일 불러오기  (0) 2021.10.19
'JAVA_EE/AJAX' Related Articles more