코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.
오늘은 발표준비 때문에 자바스크립트 공부를 조금 적게 했습니다 ㅠ
select 태그
옵션을 선택하는 select 태그는 option과 함께 사용한다.
<select>
<option>상의</option>
<option>하의</option>
</select>☞ 자유로운 input과 달리 정해져 있는 것만 선택이 가능하다.
특정 옵션을 선택하면 특정 옵션이 활성화 되도록 하기
<body>
<form class="container my-5 form-group">
<p>상품선택</p>
<select class="form-select mt-2 product">
<option>모자</option>
<option>셔츠</option>
</select>
<select class="form-select mt-2 hide">
<option>90</option>
<option>95</option>
<option>100</option>
</select>
</form>
<script>
// document.getElementsByClassName('.form-select')[0].addEventListener('input', function(){
// if(document.querySelector('.form-select').value == '셔츠'){
// document.getElementsByClassName('.form-select')[1].remove('.hide')
// }
// })
$('.form-select').eq(0).on('input', function(){
var value = $('.form-select').eq(0).val(); // 혹은 this 혹은 e.currentTarget.value;
if (value == '셔츠') {
$('.form-select').eq(1).removeClass('hide');
}
else{
$('.form-select').eq(1).addClass('hide');
}
});
</script>
</body>오늘의 한줄평 : 늘 순수 바닐라 자바스크립트로 구현하는데에는 조금 어려움이 있지만 열심히 해야겠다.
출처 : 코딩애플 https://codingapple.com/course/javascript-jquery-ui
귀여운 걸 좋아하고 흥미가 있으면 불타오릅니다💙 최근엔 코딩이 흥미가 많아요🥰