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

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

오늘은 제이쿼리[jquery] 이벤트[event]메서드 change로 선택한select의option의 값을 기준으로
다른 select가 보이도록 해보겠습니다.

위화면처럼 셋팅해주세요~

실행 화면입니다.~

===============================
 $('.s1').hide();
  $('.s2').hide();
$('.s0').change(function(){
   alert($(this).val());
===============================
먼저 class이름이 s1,s2 는 페이지가 실행하면 숨기도록 했습니다. 그리고
class이름이 s0가 change 변경되면
alert으로 change로 변경된값을 경고창이 뜨도록 하였습니다.

실행을하면 소분류 select는 숨겨놨기때문에 아직안보입니다.

class이름이 s0가 change로 변경되면 경고창이뜨면서 value의 값이 뜨게됩니다.
이제 값이 변경되는 것을 알수있으니 경고창이뜨는 부분은 주석처리를 하겠습니다.

그럼이제 class이름이 s0가 change로 변경되면 value의 값의 기준으로
value값이 1면 한식종류의 select가 보이도록
value값이 2면 일식종류의 select가 보이도록 해보겠습니다.
===============================
$('.s1').hide();
   $('.s2').hide();
   $('.s'+$(this).val()+'').show();
===============================
한번더 class이름이 s1,s2 는  change로 실행하면 숨기도록 했습니다.
그이유는 주석처리해보고 실행을 해보시면 바로 듯해요^ㅡ^
위에서 $(this).val()값은 변경된 value의 값인걸 알수 있습니다.
대상을 .s변경된값 즉 1이나 2이죠
즉 select에서 한식으로 변경하면
$(.s1).show(); <== 이렇게 실행된답니다.

자그럼 선택을해볼까요?

일식을 선택하니 음식 종류 소분류 부분에 일식에 해당하는 select가 보이도록 되었습니다.
오늘은 제이쿼리[jquery] 이벤트[event]메서드 change로 선택한select의option의 값을 기준으로
다른 select가 보이도록 해보았습니다.
내일은 다른형식으로 만들어볼께요^ㅡ^/
다음에또만나요~