컴퓨터 프로그래밍/JQuery
setTimeout()-select
깝돌이
2020. 5. 30. 12:18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setTimeout</title>
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//1. select tag중에서 선택한 값(이름)을 name변수에 할당합니다.
/* var name = $('select>option:selected').val();
문제: 위에 코드는 alert(name); 새로고침 하자마자 alert가 나옵니다. 내가 선택 할 시간을 줘야합니다. */
//2. setTimeout()을 사용해서 일정 시간 이후에 로직이 돌아가도록 설정해줍니다. (단, 1번만 실행이 됩니다. )
setTimeout(function() {
name = $('select>option:selected').val();
alert(name);
}, 3000/*3초 뒤에 위에 있는 코드가 동작한다*/);
//3. select폼에서 내가 선택한 이름이 5초 지난후 아래에 추가한 입력 박스에 출력 되도록 setTimeout()을 사용합니다.
setTimeout(function(){
//var name = $('select>option:selected').val();
$('input[type=text]').val(name);
}, 5000);
});
</script>
</head>
<body>
<select multiple ="multiple">
<option>제영</option>
<option>호현</option>
<option>치종</option>
<option>재헌</option>
</select><br/><br/>
<!-- 폼 추가... -->
선택한 이름 출력::<input type = "text" name = "result" size = "16px">
</body>
</html>