HTML/JS(Select문 사용법)

Jiun·2022년 8월 17일
1

HTML/CSS/JS

목록 보기
1/6
post-thumbnail

배우는 것이 많아지니 정리할 곳이 필요하여, 늦었지만 지금이라도 꾸준히 배운것들을 기록하기 위해 만들었습니다!

<form class="container my-5 form-group">
        <p>상품선택</p>
        
        <select class="form-select mt-2">
          <option>모자</option>
          <option>셔츠</option>
          <option>바지</option>
        </select>
        
        <select class="form-select mt-2 hide">
          <option>95</option>
          <option>100</option>
        </select>
    </form>

이 예제를 통하여 html삽입 및 다양한for문을 학습하였습니다.
항목를 선택하면 그 항목에 맞는 사이즈표를 드롭다운 하는 코드입니다.

★select태그에는 input과change이벤트가 발생합니다.

방법1.

hide라는 클래스를 만들어서 클릭시 클래스를 제거하는 방식입니다.

<style>
    .hide{
        display: none;
    }
</style>

하지만 미리 숨겨놨다 보여주는식은 확장성이 부족하므로 지양하도록 합시다!

방법2.

JS코드로 html을 생성하여 필요한만큼 옵션태그를 만들어 적용하는 방식입니다.

간단한 코드로 예시를 들자면

var text = '<p>안녕</p>';
document.querySelector('#test').insertAdjacentHTML('beforeend', text);//안쪽밑에 '추가'
$('#test').append(text);

JS - insertAdjacentHTML()사용
jQuery - append()사용

JS - value()사용
JQuery - val()사용

아래는 본 실습코드입니다▼.

var pants = [28, 30, 32, 34];
var shirts = [95, 100, 105];
$('.form-select').eq(0).on('input', function (e) {
    var value = e.currentTarget.value
    if (value == "셔츠") {
        $('.form-select').eq(1).removeClass('hide');
        $('.form-select').eq(1).html('');
        shirts.forEach((a) => {
            $(".form-select").eq(1).append(`<option>${a}</option>`)
        })
    }
    
    else if (value == "바지") {
        $('.form-select').eq(1).removeClass('hide');
        $('.form-select').eq(1).html('');
        pants.forEach((b, i) => {
            $('.form-select').eq(1).append(`<option>${b}</option>`)
        })
    }
    else {
        $('.form-select').eq(1).addClass('hide');
    }
})

코드설명 :
$('.form-select').eq(0)를 input했을때
'셔츠'를 선택하면 $('.form-select').eq(1)의 내용물을 다 지우고,
'shirts'리스트의 수만큼 option태그를 생성과동시에 데이터값을 순서대로 집어넣는 과정을 수행합니다.
('바지'선택시애도 동일한 과정을 수행)
'모자'선택시 사이즈표 hide클래스추가 (display:none)

개념1

일반적인 for문을 사용하면은

for(var i=0;i<pants.lenght;i++){
		~~~
	}

이지만 array는 forEach, object는 for in문을 사용합니다.

//array자료형
pants.forEach(function(a,i){
		~~~
}

//object자료형
var obj = { name : 'kim', age : 20 }

for (var 작명 in obj){
  console.log(작명)
}

funtion의 파라미터중 a는 pants의 데이터를 저장하고, i는 0부터 순차적으로 증가하는 정수를 저장합니다.

개념2

▼반복문의 용도▼
1.코드 반복작성
2.array나object의 데이터들을 다 꺼낼때 사용

개념3

$('.form-select').eq(0).on('input', function (e) {
	var value = this.value
}

위 코드에서 function을 '=>(arrowFunction)'로 바꿔 쓸수있습니다.(ES6문법)

$('.form-select').eq(0).on('input',(e) => {
	var value = this.value
}

다만 '=>'을 쓸경우 내부의 this를 재정의 하지않기 때문에 이벤트리스너가있는 경우 사용하지않는것을 권장합니다.
★e.currentTarget.value (=this)
ex)var value = this.value
위의 코드일땐 잘 실행되지만 밑의 코드일땐 내부의this를 재정의 하지 않기 떄문에 실행이 잘 안될수도 있습니다.

profile
Anakin787

0개의 댓글