jQuery를 이용해서 콤보 박스 혹은 full-down 메뉴인 select 태그의 선택된(selected) 항목의 값 가져오기.
2가지 방법으로 처리해 보고자 한다.
첫 번째는 select 태그를 이용해서 값을 가져오는 방법과 두 번째는 select의 id를 이용해서 값을 가져오는 방법이다.
자세한 방법은 아래 코드에서...
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<select name="name_Select" id="id_Select">
<option value="val1">txtVal1</option>
<option value="val2">txtVal2</option>
<option value="val3">txtVal3</option>
<option value="val4">txtVal4</option>
</select>
<hr/>
<button id="valFunc_tag">val 함수 using tag name</button><br/>
<button id="textFunc_tag">text 함수 using tag name</button>
<hr/>
<button id="valFunc_id">val 함수 using id</button><br/>
<button id="textFunc_id">text 함수 using id</button>
<script>
$(document).ready(function(){
$("#valFunc_tag").on("click", function(){
//select라는 태그 이름을 이용해서 select 박스를 선택한 후
// .val()함수로 값을 가져오면 option의 value 값을 가져온다.
//따라서 val1, val2, val3...의 값을 가져온다.
var kkk = $("select option:selected").val();
alert(kkk);
});
$("#textFunc_tag").on("click", function(){
//select라는 태그 이름을 이용해서 select 박스를 선택한 후
// .text()함수로 값을 가져오면 option의 text 값을 가져온다.
//따라서 txtVal1, txtVal2, txtVal3...의 값을 가져온다.
var kkk = $("select option:selected").text();
alert(kkk);
});
$("#valFunc_id").on("click", function(){
//아래의 경우는 select 박스의 id를 이용해서 select 박스를 선택하되
//나머지는 위의 설명과 같다.
var kkk = $("#id_Select option:selected").val();
alert(kkk);
});
$("#textFunc_id").on("click", function(){
var kkk = $("#id_Select option:selected").text();
alert(kkk);
});
});
</script>
</body>
</html>
'jQuery' 카테고리의 다른 글
| 부트스트랩의 모달 창 사용하기 (1) | 2018.08.06 |
|---|---|
| jQuery의 getJSON()과 each() 함수의 사용법 (0) | 2018.08.02 |