select, append, forEach

select

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

$('.form-select').eq(0).on('input', function(){
	var value = $('.form-select').eq(0).val(); // 셀렉트 선택값
	if(value == '셔츠'){
		$('.form-select').eq(1).removeClass('form-hide');
	}
})

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

 

---

append

<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 form-hide"></select>
</form>

$('.form-select').eq(0).on('input', function(){
  var value = $('.form-select').eq(0).val();
  if (value == '셔츠') {
    $('.form-select').eq(1).removeClass('form-hide');
  }
  else if (value == '바지'){
    $('.form-select').eq(1).removeClass('form-hide');
    $('.form-select').eq(1).html('');
    var 템플릿 = `<option>28</option><option>30</option>`;
    $('.form-select').eq(1).append(템플릿)
  }
});

---

// 첫번째 방식 
var inp = document.createElement('p');
inp.innerHTML = 'hi!!!!!!!!!!';
inp.classList.add('text-info');
document.querySelector('#box').appendChild(inp);

// 두번째 방식 
var inp2 = '<p class="text-primary">hello2</p>';
$('#box2').append(inp2);

//
document.querySelector('#box2').innerHTML = inselect; 
document.querySelector('#box2').insertAdjacentHTML('beforeend', inp2);

 

---

forEach

var pants = [28,30,32];
var tops = [90,95,100];

document.querySelectorAll('.form-select')[0].addEventListener('input', function(e){
  var insel = e.currentTarget.value;
  console.log(insel);
  if(insel == '셔츠' ){
    
    document.querySelectorAll('.form-select')[1].innerHTML = ''; 
    document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
    tops.forEach(function(item){
      $('#form2').append('<option>' + item + '</option>');
    })
  
  } else if (insel == '바지'){
    
    document.querySelectorAll('.form-select')[1].innerHTML = ''; 
    document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
    pants.forEach(function(item){
      //$('#form2').append('<option>' +item+ '</option>');
      document.querySelectorAll('.form-select')[1].insertAdjacentHTML('beforeend', '<option>' + item + '</option>');
    })
  }

})

//object 반복문 
var car = { name:'sonata', price:1000, color:'white'};
for (var key in car){
	console.log(key, car[key]);
}

//축약 
tops.forEach(function(item){
		$('#form2').append('<option>' + item + '</option>');
})
tops.forEach((item) => {
		$('#form2').append('<option>' + item + '</option>');
})