728x90
반응형
실행 화면
 |
 |
 |
1. 자바스크립트 코드
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title>
</head>
<body>
<h3>계산</h3>
<hr>
도시 선택 <select id="sel" onclick="show()">
<option value="seoul, 서울">서울
<option value="busan, 부산">부산
<option value="daegu, 대구">대구
</select>
<div>선택한 도시: <span id="result">seoul, 서울</span></div>
<script>
function show() {
var sel = document.getElementById("sel");
var result = document.getElementById("result");
result.innerHTML = (sel.options[sel.selectedIndex].value);
}
</script>
</body>
</html>
2. JQuery 코드
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>계산</title>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
도시 선택 <select id="sel">
<option value="seoul">서울
<option value="busan">부산
<option value="daegu">대구
</select>
<div>선택한 도시: <span id="result">seoul, 서울</span></div>
<script>
$(document).ready(function(){
$("#sel").on('change', function(){
var sel = $("#sel option:selected").val();
var Tsel = $("#sel option:selected").text();
$("#result").html(sel + "," + Tsel);
});
});
</script>
</body>
</html>'웹개발' 카테고리의 다른 글
| [명품 웹 프로그래밍] 9장 예제 9-20, 키 이벤트 리스너 (0) | 2021.12.12 |
|---|---|
| [명품 웹 프로그래밍] 9장 예제 9-19, select 객체에서 선택한 과일 출력 (0) | 2021.12.12 |
| [명품 웹 프로그래밍] 9장 예제 9-18, 체크박스로 선택 물품 계산 (0) | 2021.12.12 |
| [명품 웹 프로그래밍] 9장 예제 9-17, 선택된 라디오버튼 알아내기 (0) | 2021.12.12 |
| [명품 웹 프로그래밍] 9장 예제 9-15, new Image()로 이미지 로딩 (0) | 2021.12.12 |
