Jquery[제이쿼리] 이벤트[event]메서드 change 배우기2

안녕하세요~ 주니주니 입니다.

오늘은 어제에 이어 제이쿼리[jquery] 이벤트[event]메서드 change로 선택한select의option의 값을 기준으로 append를 사용하여 select의option을 추가해보겠습니다.

위화면처럼 셋팅해주세요~
오늘은 두개의 select로 해보겠습니다.

기본틀 ! 실행해서 확인해주세요~

===============================
var ko=['비빔밥','불고기'];
var ja=['초밥','소바'];
===============================
우선 '음식 종류 대분류' select의 option을 선택하면 
'음식 종류 소분류'select에 option을 추가할 내용을 배열변수담아 저장하였습니다.



===============================
$('.s0').change(function(){
   var sel = $(this).val(); 
===============================
여기까지는 저번시간이랑 똑같습니다. 오늘은
if를 사용하여 sel값이 1이면 '음식 종류 소분류'select에 
append를 사용하여 ko변수에 있는 값으로 option을 추가하고
 sel값이 2이면 ja변수의 값으로 option을 추가하면되겠죠?

===============================
$.each(ko,function(i,item){
     $('.s1').append('<option class="op">'+item+'</option>');
    });
===============================
※each()는 루프가 필요할때쓰이는 메소드입니다.
each를 사용하여 반복을 하는데 ko의변수의 크기 즉 2개의값이 있으니 2번돌아 가겠죠?
i의값은 첫번째돌아갈때는 0 두번째는 1 돌아간 횟수의 값을 저장하고있고요
item의값은 변수ko[i]의 데이타값 즉 처음 돌아갈때 ko[0]의값은 비빔밥입니다.
그다음은 반복하면서 append를 사용하여 option추가시키는 문구입니다.
append는 자주나왔기때문에 설명은 생략할께요.
※i,item <== 변수명은 아무거나 편하신걸로 하시면된답니다.

'음식 종류 대분류' select를 클릭하여 한식을 클릭하니
'음식 종류 소분류' select에 비빔밥,불고기가 나왔습니다.

이번에는 일식을 선택 했는데!!!
아니!! 이럴수가 앞에 내용이 그대로있으면서 일식에 해당하는 초밥,소바 내용이
뒤에 추가 되었네요!

그럼 수정을 해볼까요?
아주 간단해요~
===============================
$('.op').remove();
===============================
class이름이 op인 모든요소들을 제거하라는 뜻입니다.
※remove는 일치하는 모든요소들을 제거는 메소드입니다.
그럼 다시 실행을 해볼까요?

여기까지는 아까랑 같습니다.

짠~ 아까랑은 다르게 한식에 해당하는값들이 사라지고 일식에 해당하는
값들만 옵션에 추가되어나오네요^ㅡ^
오늘은 어제에 이어 제이쿼리[jquery] 이벤트[event]메서드 change로 선택한select의option의 값을 기준으로 append를 사용하여 select의option을 추가해보았습니다.
그럼 다음에 또만나요~