# Select

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2F6EsjeTfHx5UkDklMQ2hY%2FScreenshot_1.png?alt=media&#x26;token=c4625c6e-0432-4ef9-926f-55492938e4a3" alt=""><figcaption></figcaption></figure>

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

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



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



```html
<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로 유저가 선택한 값을 가져 올 수 있음.

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



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





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

{% code title="main.css" %}
```css
.hide {
    display: none;
}
```
{% endcode %}

```javascript
$('.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 사이즈까지 있는경우&#x20;

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

여자 사이즈의 경우  등등&#x20;

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

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

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



## 💎HTML 생성하는 법1

```html
<div id="test">

</div>

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

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FKbPXg98hJPkC0fMqDDZB%2FScreenshot_4.png?alt=media&#x26;token=3b9c5cf6-9978-4cc1-a6a9-3cb22ced1e7b" alt=""><figcaption></figcaption></figure>

## 💎HTML 생성하는 법2

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

이렇게 생성하는 방법도 있다.&#x20;

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

{% embed url="https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML" %}

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

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

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



jQuery로 하려면&#x20;

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

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





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













```javascript
  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');
    }
  })
```

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

다시 셔츠를 선택하면 이상함.&#x20;

해결해야겠지?
