Select

이번 시간엔 셀렉트박스(콤보박스)라고 하는걸 만들어보자.

보통 쇼핑할때 사이즈 컬러옵션 고를때 많이 봤던거임

js011.html에 아래 코드를 추가하자 ( body 아래script 위쪽)

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

선택지는 <option> 으로 추가 할 수 있음

<select> 태그도 선택 시 input, change 이벤트 발생함.

<select> 태그는 .value로 유저가 선택한 값을 가져 올 수 있음.

console.log(document.querySelectorAll('.form-select')[0].value);
console.log($('.form-select').val());

✨ 과제. 셔츠 선택하면 아래에 95 , 100을 선택할 수 있는 셀렉트 박스 만들기

<select class="form-select mt-2 hide">
    <option>95</option>
    <option>100</option>
</select>

main.css

.hide {
    display: none;
}

$('.form-select').eq(0).on('input', function (){
    var selected = $('.form-select').val();
    //var selected = this.value;
    //var selected = e.currentTarget;
    if(selected == '셔츠'){
      $('.form-select').eq(1).removeClass('hide');
    }
})

✨ 과제. 모자를 선택하면 사이즈 select box를 다시 숨기기

셀렉트 박스를 이런식으로 생성하면 경우의 수가 너무 많다.

95,100,105 사이즈까지 있는경우

S, M , L , XL 사이즈 표기된경우

여자 사이즈의 경우 등등

그럴때마다 select box를 만들어두고 해당 박스를 보여주기는 힘들다.

실제 쇼핑몰이라면 해당 제품의 사이즈 데이터를 서버에서 가져와서 해당 데이터 갯수만큼

<option> 태그를 생성해주면 될듯

💎HTML 생성하는 법1

<div id="test">

</div>

<script>
  var pTag = document.createElement('p');
  pTag.innerHTML = "태그 생성";
  document.querySelector('#test').appendChild(pTag);
</script>

💎HTML 생성하는 법2

var pTag2 = '<p>태그 생성2</p>';
document.querySelector('#test').insertAdjacentHTML("beforeend", pTag2);

이렇게 생성하는 방법도 있다.

2번이 코드가 짧아서 더 추천함.

Element: insertAdjacentHTML() 메서드 - Web API | MDN

왜 계속 다 설명 안 해주고 문서 사이트 찾아서 보여주냐?

이걸 다 외우고 다니는 개발자는 없다.

필요할 때 검색하는 방법을 알려주는 것임.

jQuery로 하려면

var 변수 = "테스트";
$('#test').append("<p>" + 변수 + "</p>");

jQuery append는 안쪽 맨 밑에 추가하라는 뜻.

✨ 과제. 위에 배운것을 가지고 상품에 모자 셔츠 이외에 하의를 추가하고 하의를 선택하면 26, 28 ,30 ,32,34 옵션을 추가해보자.

  var pantsSize = [26,28,30,32,34];
  $('.form-select').eq(0).on('input', function (){
    var selected = $('.form-select').val();
    
    if(selected == '셔츠'){
      $('.form-select').eq(1).removeClass('hide');
    }else if(selected == '모자'){
      $('.form-select').eq(1).addClass('hide');
    }else if(selected == '바지'){
      $('.form-select').eq(1).html('');
      for(let i=0; i<pantsSize.length; i++){
        $('.form-select').eq(1).append("<option>"+pantsSize[i] +"</option>")
      }
      $('.form-select').eq(1).removeClass('hide');
    }
  })

🔥 이렇게 하면 한가지 오류가 발생함. 바지를 선택했을 때 옵션은 잘 생성 되는데

다시 셔츠를 선택하면 이상함.

해결해야겠지?