Select

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

 

옵션선택하면 추가 Select 만들기

    <select class="form-select mt-2" onchange="changeSelect()">
      <option>모자</option>
      <option>셔츠</option>
    </select>
    </p>
    <div class = "size">
    <p>사이즈</p>
    <select class="form-select mt-3" >
        <option>95</option>
        <option>100</option>
      </select>
    </div>

 

이렇게 추가로 select를 만들고 

선택되는 이벤트를 감지하는 onchange 함수를 이용한다. 

 

그래서 그 함수에 기존에 사이즈함수에 있던 class에 css display:none 을 때어달라고 하면된다.

 

function changeSelect(){
    $('.size').eq(0).removeClass('size')
}

 

이 방법은 내가 처음에 생각한 방법인데 이렇게 하면 안된다.

사이즈를 보여준다는게 특정 항목을 선택했을때인데 내가 사용한 onchange 함수는 어떤항목이든 변화를 감지하는것이다. 

사이즈가 없는 항목도 선택시 뜨기때문에 잘못된 코드이다.

 

if문을 이용해 사용자가 선택한 항목을 가져와 비교하면 될거 같다.

 

if ($('.form-select'.eq(0).val()=='셔츠') {
    //클래스 제거해라
}

 

이 방식은 코드를 숨겨놨다가 보여주는 식인데 확장성이 부족할수있음 

js 로 html 태그를 생성하는 방식을 쓰면 괜찮음

 

 

<div id = 'test'>

</div>

// js 
var a = document.createElement('p'); //p태그를 생성하고
a.innerHTML = '안녕'; //내용물 넣어주고
document.querySelector('#test').appebdChild(a);

좀 더 단순화 하면

 

var add = '<p>안녕</p>'
document.quertSelector('#test').insertAdjacentHTML('beforeend',add)

//쿼리 문법
$('#test').append(add);

 

바지 옵션추가 하고 선택하면 사이즈 옵션뜨게 하기

배웠던 방식을 사용해서 html 추가 함수를 이용해 코드를 작성했다. 

 

function changeSelect(){

    var a = $('.form-select').eq(0).val()
    console.log(a)
    if( a == '셔츠'){
        $('.size').eq(0).removeClass('size');
        $('.form-select').eq(1).html('');
        var b = '<option>95</option><option>100</option>'
        $('.form-select').eq(1).append(b);

    }else if (a == '바지'){
        $('.size').eq(0).removeClass('size');
        $('.form-select').eq(1).html('');
        
        var b = '<option>28</option><option>30</option>'
        $('.form-select').eq(1).append(b);

    }
}

바지를 선택하면 기존에 만들었다 사이즈 select 를 보이게 하고 

기존에 디폴트 값으로 있던 옵션에 html을 비워준다 

그리고 새롭게 넣을 html 태그를 넣어준다. 

 

 

Select 3 : forEach, for in 반복문

 

forEach는 array에 붙힐수 있는 반복문이다. 배열의 원소 갯수만큼 반복해준다

var size = [28,30,32]
size.forEach(function(){

	}) // 이 안에 코드를 3번 반복
    
size.forEach() => {
	//arrow function
}

이 콜백함수의 파라미터는 배열의 원소임

파라미터를 하나더 추가할수있는데 그건 0부터 1씩 증가하는 정수

 

 

arrow function 과  일반 function

함수 내부에서 this를 사용할때 차이가 있다.

arrow 함수경우 외부의 this 값을 가져오고 

일반 함수 경우 함수내부에서 this값을 재정의 한다.  

그래서 this 값 쓰고 싶으면 그냥 함수 쓰면됨