PostIT

[JavaScript]옵션에서 값 가져오기. Select Option 자바 스크립트(이메일 입력시) 본문

Script/JavaScript

[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입니다.

한번 읽어보시면 쉽게 이해되실거에요.



Comments