반응형
JavaSscript를 사용하면서 HTML의 입력 태그에서 값을 자주 가져와서 사용하게 되는 것 같습니다.
이번 글에서는 자바스크립트(JavaScript)에서 HTML 태그인 select 태그에서 선택된 option의 값(value)을 가져오는 방법입니다.
script에서 select 태그에서 선택된 option 값 가져오기
HTML의 select 태그의 예제입니다.
<select id="city" onchange="changeFn()">
<option name="city" value="seoul">서울</option>
<option name="city" value="busan">부산</option>
<option name="city" value="jeju">제주</option>
</select>
1. onchange 속성 사용
select의 onchange 속성을 사용해서 스크립트의 함수를 호출하여 선택된 option의 값을 alert으로 출력하는 방법입니다.
<html>
<head>
<title> TEST <title>
<script>
function changeFn(){
var city = document.getElementById("city");
var value = (city.option[city.selectedIndex].value);
alert("선택된 항목은 "+value);
};
</script>
<body>
.
.
.
</body>
onchange 속성을 사용하기 때문에 select box에서 선택 항목이 바뀌는 이벤트가 있을 때마다 changeFn()이 실행됩니다.
반응형
2. JavaScript를 이용한 option 값 가져오기
select 태그의 value 속성을 사용하는 간단한 방법입니다. 이 방법은 선택된 option의 value 값을 직접 반환하는 방법입니다.
<script>
var cityValue = document.getElementById("city").value;
alert(cityValue);
</script>
.
.
.
3. selectedIndex 속성을 사용하여 선택된 option 값 가져오기
조금은 복잡하지만, 선택된 option의 다른 속성에도 접근할 수 있는 유연성을 제공합니다.
<script>
var city = document.getElementById("city");
var cityValue = city.options[city.selectedIndex];
alert(cityValue.value);
</scirpt>
.
.
.
위의 방법들을 사용하여 쉽게 select 태그에서 선택된 option의 값(value)을 JavaScript 코드 내에서 사용할 수 있습니다. 웹 개발 프로젝트에서 동적인 폼 처리나 사용자 입력에 따라 동작을 구현할 때 유용하게 활용할 수 있습니다.
반응형
'Web Programing > JavaScript' 카테고리의 다른 글
| onclick에서 매개변수로 문자, 숫자 script로 전달 / 스크립트릿 ReferenceError (0) | 2024.05.15 |
|---|---|
| Ajax URL 파라미터 데이터 보내기 사용 방법 (0) | 2024.04.03 |
