이메일 셀렉트 박스 선택 > 정보공유

<?php
// PHP의 전체 이메일 변수를 가공한다.
$wr_email = 'test@naver.com';
$email_parts = explode('@', $wr_email);
$email_local = $email_parts[0];
$email_domain = isset($email_parts[1]) ? $email_parts[1] : '';
?>

<label for="wr_email" class="sound_only">이메일</label>
<div class="email-group">
	<input type="text" id="wr_email1" name="wr_email1" placeholder="이메일을 입력하세요." value="<?php echo $email_local; ?>" required>
	<input type="text" id="wr_email2" name="wr_email2" placeholder="메일주소를 입력하세요." value="<?php echo $email_domain; ?>" required>
	<div class="sel-wrap">
		<select id="email_select">
			<option value="" <?php echo get_selected($email_domain, ""); ?>>메일계정 선택</option>
			<option value="gmail.com" <?php echo get_selected($email_domain, "gmail.com"); ?>>gmail.com</option>
			<option value="naver.com" <?php echo get_selected($email_domain, "naver.com"); ?>>naver.com</option>
			<option value="daum.net" <?php echo get_selected($email_domain, "daum.net"); ?>>daum.net</option>
			<option value="hanmail.net" <?php echo get_selected($email_domain, "hanmail.net"); ?>>hanmail.net</option>
			<option value="nate.com" <?php echo get_selected($email_domain, "nate.com"); ?>>nate.com</option>
			<option value="custom">직접 입력</option>
		</select>
	</div>
</div>

<script>
// 이메일 셀렉트
document.addEventListener('DOMContentLoaded', function() {
	var emailDomain = document.getElementById('wr_email2');
	var select = document.getElementById('email_select');

	// 선택된 옵션에 따라 초기 읽기 전용 상태 설정
	if (select.value === 'custom' || select.value === '') {
		emailDomain.readOnly = false;
	} else {
		emailDomain.readOnly = true;
	}

	// 셀렉트 박스 변경 시 이벤트 리스너 추가
	select.addEventListener('change', function() {
		if (this.value === 'custom' || this.value === '') {
			emailDomain.value = '';
			emailDomain.readOnly = false;
		} else {
			emailDomain.value = this.value;
			emailDomain.readOnly = true;
		}
	});
});
</script>