먼저 스크립트 소스와 html 소스 작성 후에 실행화면을 보도록 하겠습니다.
스크립트소스
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$('#email_select').change(function(){
if($('#email_select').val() == "1"){
$("#last_email").val(""); //값 초기화
$("#last_email").prop("readonly",false); //활성화
} else if($('#email_select').val() == ""){
$("#last_email").val(""); //값 초기화
$("#last_email").prop("readonly",true); //textBox 비활성화
} else {
$("#last_email").val($('#email_select').val()); //선택값 입력
$("#last_email").prop("readonly",true); //비활성화
}
});
});
</script>
jsp소스
<body>
<input type="text" id="first_email" size="10" />
@<input type="text" id="last_email" size="10" />
<select id="email_select">
<option value="" selected>::선택하기::</option>
<option value="naver.com">naver.com</option>
<option value="nate.com">nate.com</option>
<option value="daum.net">daum.net</option>
<option value="gmail.com">gmail.com</option>
<option value="hotmail.com">hotmail.com</option>
<option value="bondingedu.com">bondingedu.com</option>
<option value="hanmir.com">hanmir.com</option>
<option value="empas.com">empas.com</option>
<option value="dreamwiz.com">dreamwiz.com</option>
<option value="korea.com">korea.com</option>
<option value="lycos.co.kr">lycos.co.kr</option>
<option value="freechal.com">freechal.com</option>
<option value="1">::직접입력::</option>
</select>
</body>
소스를 보시면 prop를 사용했는데 jquery버전별로 사용이 불가능한 경우도 있으니 불가능할경우 attr태그를
사용해 주시면 될것 같습니다.
지금까지 .attr()만으로 가능하던 처리를 버전1.6의 업데이트로 인하여 .attr()과 .prop()으로 나누어졌습니다.
실행 화면 과 소스를 확인해 보시면 소스상 option value="1"로 준 직접입력 항목이 보이실 겁니다.
스크립트 상으로 셀렉트 값이 1일경우 last이메일주소에 공백으로 주며, readonly 즉! 활성화는 false하여라
활성화 시켜라 라는 부분으로 해석하시면 될듯 합니다.
아래 소스 내용도 동일하니 실행화면으로 넘어가겠습니다.
지정된 선택값과 선택하기를 선택할경우 last_email 텍스트 입력란은 비활성화 처리로 클릭이 불가능하며,
직접입력 선택시에만 활성화처리로 입력이 가능합니다.
이메일 뒷 주소를 선택해 주면 자동으로 last_email로 입력됩니다.
감사합니다.
'JAVA개발' 카테고리의 다른 글
| [JAVA 개발] jquery(제이쿼리) 회원가입 연락처 숫자만 입력 폼 (0) | 2015.07.17 |
|---|---|
| [JAVA 개발] jquery(제이쿼리) keyup / text / html 이용한 회원가입 비밀번호 확인 체크폼 (0) | 2015.07.17 |
| [JAVA 개발] jquery(제이쿼리) 스크립트로 지정태그에 클래스 적용하기 (0) | 2015.07.16 |
| [JAVA 개발] jquery(제이쿼리) focus를 이용한 회원가입 폼 (0) | 2015.07.15 |
| [JAVA 개발] jquery(제이쿼리) 더블클릭이벤트 (0) | 2015.07.15 |
