Select 선택하면 다른 select 나오게 하기

셔츠 선택시 사이즈 나오게 하기

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

---

.form-hide {
  display: none;
}

---

document.querySelectorAll('.form-select')[0].addEventListener('input', function(){
    var value = $('.form-select').eq(0).val();
    if (value == '셔츠') {
      document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
    }
  });

자바스크립트로 html 생성하는 법

<div id="test">
  
</div>

<script>
  var a = '<p>안녕</p>';
  document.querySelector('#test').insertAdjacentHTML('beforeend', a);
</script>

• 문자자료로 html을 만든 다음

• insertAdjacentHTML() 안에 넣으면 됩니다.

• 'beforeend' 이건 안쪽 맨 밑에 추가하라는 뜻입니다.

Q. 저는 안쪽에 추가하는게 아니라 아예 바꾸고 싶은데요..
A. div찾아서 innerHTML = '<p></p>' 쓰면 됩니다

---

바지를 누르면 사이즈를 28, 30으로 나오게 하기

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

---

.form-hide {
  display: none;
}

---

document.querySelectorAll('.form-select')[0].addEventListener('input', function(){
    var value = $('.form-select').eq(0).val();

  if (value == '바지'){
      document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
      
      var 템플릿 = `<option>28</option><option>30</option>`;
      document.querySelectorAll('.form-select')[1].innerHTML=템플릿;
    }


  });

단, 옵션에 다른요소가 있으면 선택했을 시 28,30은 안나오도록 구현해야함

pants 데이터 갯수만큼 <option>을 생성하고싶으면?

forEach 반복문

var pants = [28, 30, 32];
pants.forEach(function(a, i){
  console.log(a)
});

콜백함수 안에 파라미터 2개까지 작명이 가능한데 (실은 3개까지)
첫 파라미터는 반복문 돌 때 마다 array 안에 있던 하나하나의 데이터가 되고
둘 째 파라미터는 반복문 돌 때 마다 0부터 1씩 증가하는 정수가 됩니다.

var pants = [28, 30, 32];
document.querySelectorAll('.form-select')[0].addEventListener('input', function(){
    var value = $('.form-select').eq(0).val();
    if (value == '셔츠') {
      document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
    }
    else if (value == '바지'){
      document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
      document.querySelectorAll('.form-select')[1].innerHTML='';
      pants.forEach(function(a){
        $('.form-select').eq(1).append(`<option>${a}</option>`)  //제이쿼리
      })
    }
});

반복문의 용도

1. 코드복붙하고싶으면

2. array, object 자료 다 꺼내고 싶을 때

반복문 사용하면 유용합니다.

arrow function 문법

특히 콜백함수만들 때 자주 쓰는 방법인데

var pants = [28, 30, 32];
pants.forEach(function(a){
  console.log(a)
});

pants.forEach((a) => {
  console.log(a)
});

function 키워드 대신 => 화살표를 ( ) 우측에 부착해도 똑같이 함수만들 수 있습니다.

저걸 arrow function 이라고 합니다.

pants.forEach( a => {
  console.log(this)
});

arrow function은 파라미터가 하나면 () 소괄호 생략해도 봐줍니다.
함수 중괄호 안에 return 한 줄 밖에 없으면 { } 중괄호와 return 동시에 생략해도 봐줍니다.
그래서 간결하니 콜백함수에 자주 사용하는 사람들이 있습니다.

let 함수 = function(){ console.log('안녕') }
let 함수 = () => { console.log('안녕') }

이럴 때도 arrow function이 가끔 보입니다.

그냥 함수와 arrow function의 기능차이는 하나가 있는데
함수 안에서 this를 써야할 경우

• 그냥 함수는 함수 안에서 this를 알맞게 재정의해줍니다.
• arrow function은 함수 안에서 this를 재정의해주지 않고 바깥에 있던 this를 그대로 씁니다.
  그래서 이벤트리스너 콜백함수안에서 this를 써야하면 arrow function 쓰면 의도와 다르게 동작할 수도 있습니다.