728x90
실습1] #add1 선택시 addList 객체를 조회하여 1차 지역과 일치하는 2차 지역목록으로 #add2에 출력하여라
<script type="text/javascript">
var addList ={
'전주' : ['덕진구','완산구'],
'군산' : ['개사길','거사길'],
'익산' : ['고봉로','고현로']
};
</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>
<script type="text/javascript">
var addList ={
'전주' : ['덕진구','완산구'],
'군산' : ['개사길','거사길'],
'익산' : ['고봉로','고현로']
};
$(function(){
$('#add1').change(function(){
var add = $(this).val();
var addArray = addList[add];
var html = '<option value=""> :: 지역을 선택해 주세요 :: </option>';
for(var i=0; i<addArray.length;i++){
html += '<option value="'+addArray[i]+'">'+addArray[i]+'</option>'
}
$('#add2').html(html);
});
});
</script>
실습 2] .choice1 클릭시 choice2List 객체의 키와 일치하는 교수를 #choice2Wrap의 체크박스로 뿌려주고, #choice2Wrap 내에 생성된 교수를 클릭시 해당 교수가 담당하는 교과목을 #choice3Wrap의 choice3List 객체를 조회하여 체크박스로 뿌려주시오.
<head>
<script type="text/javascript">
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>동적 바인딩을 이용해보자!
<script>
$(function(){
$('.choice1').click(function(){
console.log($(this).val());
var val = $(this).val();
var choice2Array = choice2List[val]
var html ='';
console.log(choice2Array + '<-교수 가지고 오기');
for(var i=0; i<choice2Array.length;i++){
html += '<label> <input type = "checkBox" class="choice2" value ='+choice2Array[i]+'>'+choice2Array[i]+'</label>';
}
$('#choice2Wrap').html(html);
});
});
$(document).on('click','.choice2',function(){
var html = '';
$('.choice2:checked').each(function(){
var choice3 = $(this).val();
console.log(choice3, '<- 교수선택');
var choice3Array = choice3List[choice3];
for(var i=0; i<choice3Array.length;i++){
html += '<label> <input type = "checkBox" class="choice3" value ='+choice3Array[i]+'>'+choice3Array[i]+'</label>';
}
});
$('#choice3Wrap').html(html);
});
</script>
each로 반복문 이용해서 체크박스 체크 된 것을 확인해서 다중으로 선택 했을때 선택 하위가 보여지도록 하기!!
반응형
'[YERIEL] 개발일기 > .etc' 카테고리의 다른 글
| jQuery - json Ajax (0) | 2020.03.31 |
|---|---|
| jQuery - Html Ajax (0) | 2020.03.31 |
| 동적 바인딩 & 트리거 & 이벤트 제거 (0) | 2020.03.30 |
| 수치 조작 메서드 & 객체 편집 메서드 (0) | 2020.03.30 |
| 속성 조작 메서드 (0) | 2020.03.30 |
댓글