728x90
반응형
JQuery Ver
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<link href="<c:url value='/Bootstrap/css/bootstrap.min.css'/>" rel="stylesheet">
<script src="js/jquery-3.3.1.js"></script>
</head>
<script src="<c:url value='/Bootstrap/js/bootstrap.min.js'/>"
rel="stylesheet"></script>
<script>
$(function() {
$('#select').change(function() {
if ($('#select').val() == 'directly') {
$('#textEmail').attr("disabled", false);
$('#textEmail').val("");
$('#textEmail').focus();
} else {
$('#textEmail').val($('#select').val());
}
})
});
</script>
<body>
<div>
<input type="text" id="emailId" value="" placeholder="이메일 입력">
<span>@</span>
<input id="textEmail" placeholder="이메일을 선택하세요.">
<select id="select">
<option value="" disabled selected>E-Mail 선택</option>
<option value="naver.com" id="naver.com">naver.com</option>
<option value="hanmail.net" id="hanmail.net">hanmail.net</option>
<option value="gmail.com" id="gmail.com">gmail.com</option>
<option value="nate.com" id="nate.com">nate.com</option>
<option value="directly" id="textEmail">직접 입력하기</option>
</select>
</div>
</body>
</html>
* 셀렉트 박스 옵션은 click이 아닌 change를 이용해야 한다.
반응형
'FrontEnd' 카테고리의 다른 글
| [자바스크립트]JSON.stringify(), JSON.parse() (0) | 2021.01.07 |
|---|---|
| [자바스크립트]공지사항 - 오늘 하루 그만보기 기능 구현 (1) | 2021.01.07 |
