<label id="result"><input type="text"></label>
<select onchange="selectbox(this)">
<option>naver.com</option>
<option>hanmail.net</option>
<option>nate.com</option>
<option>korea.com</option>
<option>gmail.com</option>
</select>
✅html
1) id result인 input 또는 span등 빈태그 작성
2) select 박스 onchange=함수명 작성
function selectbox(e) {
const text = e.options[e.selectedIndex].text;
// e는 선택목록, 사용자가 선택한 선택목록을 가져온후 index값을 가져온다.
//해당 인덱스 번호에 맞는 텍스트값을 가져온다
document.getElementById('result').innerText = text;
// 선택한 텍스트를 resultID에 innertext로 집어넣는다
}
✅Javascript
1) html 함수명 함수 작성
2) text = 선택목록을 인덱스로 가져온 후 선택목록의 텍스트 선택
3) 파일의 id result에 text로 선언된 텍스트를 밀어넣는다
'Coding > javascript' 카테고리의 다른 글
| [javascript] input text값 따라 쓰여지기 (0) | 2022.06.22 |
|---|---|
| [jquery] 선택한 text추출하여 가져오기 (0) | 2022.06.22 |
| [jquery] 여러폼 에서 하나만 클릭 되는 버튼만들기 (0) | 2022.06.21 |
| [jquery] 스크롤시 상단 메뉴바 색상 바꾸기 (0) | 2022.06.17 |
| [jquery/css] 메뉴 hover시 하단으로 내려오는 nav만들기 (0) | 2022.06.17 |