객체 편집 메서드 실습 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 편집 메서드</title>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*
실습1. #add1 선택시 addList 객체를 조회하여 1차 지역과 일치하는 2차 지역목록을 #add2에 출력하여라.
*/
//실제 데이터베이스에서 조회한다는 가정 하에 데이터를 정리
var addList = {
'전주' : ['덕진구', '완산구']
,'군산' : ['개사길 ', '거사길']
,'익산' : ['고봉로', '고현로']
}
//addList['']
/* $(function() {
$('#add1').change(function() {
var a = $(this).val();
$('#add2').find('option').remove();
$('#add2').append('<option value=""> :: 지역을 선택해 주세요. :: </option>');
for( var i = 0; i <addList[a].length ; i++){
$('#add2').append('<option value="'+addList[a][i]+'">'+addList[a][i]+'</option>');
}
})
})
*/
$(function() {
$('#add1').change(function() {
var add = $(this).val();
var addArray = addList[add];
var html = '<option value=""> :: 2차 지역을 선택해 주세요. :: </option>';
for( var i = 0; i < addArray.length ; i++){
html += '<option value="'+ addArray[i] +'">'+ addArray[i]+'</option>';
}
$('#add2').html(html);
})
})
</script>
</head>
<body>
<select id="add1">
<option value=""> :: 지역 선택 :: </option>
<option value="전주"> 전주 </option>
<option value="군산"> 군산 </option>
<option value="익산"> 익산 </option>
</select>
<select id="add2">
<option value=""> :: 지역을 선택해 주세요. :: </option>
</select>
</body>
</html>
객체 편집 메서드 실습 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 편집 메서드 2</title>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*
실습2. .choice1 클릭시 choice2List 객체의 키와 일치하는 교수를 #choice2Wrap에 체크박스로 뿌려주고
#choice2Wrap 내에 생성된 교수를 클릭시 choice3List 객체를 조회하여
해당 교수가 담당하는 교과목을 #choice3Wrap에 체크박스로 뿌려주시오.
*/
$(function() {
$('.choice1').click(function () {
console.log($(this).val(),"<--클릭선택value");
var val = $(this).val();
var array = choice2List[val];
console.log( array ,"<--교수");
var html = '';
for(var i = 0 ; i <array.length ; i++){
console.log(array[i]);
html += '<label><input type="checkbox" class="choice2" name="choice2" value ="' +array[i]+'">'+array[i]+'</label>'
}
$('#choice2Wrap').html(html);
})
})
//.choice2 동적 바인딩
$(document).on('click','.choice2', function(){
var html = '';
$('.choice2:checked').each(function() {
var choice = $(this).val();
console.log(choice, '교수선택')
var array = choice3List[choice];
for(var i=0; i <array.length; i++){
html += '<label><input type="checkbox" class="choice3" name="choice3" value ="' +array[i]+'">'+array[i]+'</label>'
}
})
$('#choice3Wrap').html(html);
})
var choice2List = {
'9' : ['9급 홍길동', '9급 고길동']
,'7' : ['7급 이순신', '7급 유관순']
}
var choice3List = {
'9급 홍길동' : ['국어', '영어']
,'9급 고길동' : ['국사', '토익']
,'7급 이순신' : ['과학', '국사']
,'7급 유관순' : ['수학', '일어']
}
</script>
</head>
<body>
<div>
<h1>급수 선택</h1>
<label>
<input type="radio" name="choice1" class="choice1" value="9"> 9급
</label>
<label>
<input type="radio" name="choice1" class="choice1" value="7"> 7급
</label>
</div>
<div>
<h1>교수 선택</h1>
<div id="choice2Wrap"></div>
</div>
<div>
<h1>과목 선택</h1>
<div id="choice3Wrap"></div>
</div>
</body>
</html>