일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- interface
- Github
- 함수
- error
- javascript
- 인공지능
- framework
- Linux
- DeepLearning
- mysql
- SSH
- Python
- data
- Analysis
- git
- Security
- centos
- Deep
- Spring
- 자바
- java
- Web
- db
- LIST
- Pattern
- mariaDB
- learning
- Numpy
- Server
- ai
- Today
- Total
PostIT
[JavaScript]옵션에서 값 가져오기. Select Option 자바 스크립트(이메일 입력시) 본문
[JavaScript]옵션에서 값 가져오기. Select Option 자바 스크립트(이메일 입력시)
shun10114 2016. 6. 18. 01:08<div>
<label class="contentlabel"> 사용자 이메일 </label>
<input class="" id="email1" type="text" class="box"> @
<input class="" id="email2" type="text" class="box">
<select id="emailSelection" name="emailSelection">
<option value="1" selected="selected">직접입력</option>
<option value="gmail.com">gmail.com</option>
<option value="naver.com">naver.com</option>
<option value="hanmail.net">hanmail.net</option>
</select>
<button type="button" class="btn btn-success" id="sendContact">완료</button>
<button type="button" class="btn btn-warning" id="cancelContact" onclick="javascript:history.back()">취소</button>
</div>
전 부트스트랩을 이용해서 디자인이 이렇게 나옵니다.(제 CSS입니다.)
이젠, 이메일 기능을 넣기 위한 Html 을 구성하였으면,
그 값을 바꿨을을때의 JavaScript를 써볼게요.
$(function(){
$(document).ready(function(){
$('select[name=emailSelection]').change(function() {
if($(this).val()=="1"){
$('#email2').val("");
} else {
$('#email2').val($(this).val());
$("#email2").attr("readonly", true);
}
});
});
});
직접입력이었을 때는, email창의 값을 비우고
그 외에는 값을 email2에 채워넣고 읽을 수만 있게 만드는 JavaScript입니다.
한번 읽어보시면 쉽게 이해되실거에요.
'Script > JavaScript' 카테고리의 다른 글
[Naver D2]2016년과 이후 JavaScript의 동향 - 퍼옴 (0) | 2016.12.08 |
---|---|
[JavaScript]<a>태그에서 확인 경고창 띄우기 (0) | 2016.11.28 |
[PhantomJS]PhantomJS를 활용한 웹 스크레이핑 (0) | 2016.11.10 |
[JSP/Spring]네이버 스마트에디터 Textarea에 있는 값 전송하기 (0) | 2016.08.20 |
[JavaScript] Web에 SlideShow 만들기(Spring, Jsp) (3) | 2016.08.09 |