본문 바로가기
개발/Javascript

[js] input option 값 출력하기(ft. onchange onfocus)

by 코딩하는 갓디노 2020. 9. 20.

 

홈페이지 자주 사용하는 input 태그입니다.

자바스크립트 이용하여 조건에 맞게
input 태그의 select의 option 값을
출력하겠습니다.





자바스크립트를 이용한 input 태그 출력 구현내용

· 구현 1 option 선택 값(탐구과목)이 그대로 아래 label 값에 적용
-> 탐구과목의 과목명을 선택하면 아래 탐구 1, 탐구 2 과목명이 선택한 과목명으로 바뀜
onchange, innerHTML 이용

· 구현 2: 리셋(option값 선택 후 다시 option값을 선택으로 바꾸었을 때)
-> 탐구과목 과목명 선택하였다가 다시 과목명을 선택으로 리셋하였을 때
1. 아래 label값이 탐구 1/탐구 2로 자동 리셋
2. 아래 수능 등급, 백분위 점수가 선택으로 자동 리셋
if( value == "" ) 조건문 사용

· 구현 3: option 선택 값 필수 입력, 선택 안 하여 alert 창 출현
-> 탐구과목 선택 안 하고 탐구 1, 탐구 2 option값 누르면
alert창 "탐구 과목명 선택해주세요" 출현
커서가 탐구과목 선택명 위치
onfocus, alert, focus 이용

 

* input은 form 요소로 form 태그 안에 있어야 하지만,
form 태그 사용은 데이터 처리를 위한 기능이므로 이는 생략하겠습니다.

 

<사용예제>

 

 

<html>

<div class="inner">

  <div class="boxBlock">
    <div class="title">탐구과목</div>
    <div class="boxForm">
      <select name="sub_1" id="sub_1" class="subject" onchange="subFirst(this.value)">
        <!--onchange에서 this.value 매개변수로 이용 option의 value값 불러오기-->
        <option value="">탐구1 과목선택</option>
        <option value="생활과 윤리">생활과 윤리</option>
        <option value="사회문화">사회문화</option>
        <option value="한국지리">한국지리</option>
      </select>
      <select name="sub_1" id="sub_2" class="subject" onchange="subSecond(this.value)">
        <option value="">탐구2 과목선택</option>
        <option value="윤리와 사상">윤리와 사상</option>
        <option value="경제사">경제사</option>
        <option value="경제">경제</option>
      </select>
    </div>
  </div>

  <div class="boxBlock">
    <div class="title">수능등급</div>
    <div class="boxForm">
      <label id="level1">탐구1</label>
      <select name="choice_1" id="choice_1" onfocus="subChoice1()">
        <option value="">선택</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <label id="level2">탐구2</label>
      <select name="choice_2" id="choice_2" onfocus="subChoice2()">
        <option value="">선택</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>

  <div class="boxBlock">
    <div class="title">수능백분위</div>
    <div class="boxForm">
      <label id="score1">탐구1</label>
      <select name="choice_3" id="choice_3" onfocus="subChoice1()">
        <option value="">선택</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <label id="score2">탐구2</label>
      <select name="choice_4" id="choice_4" onfocus="subChoice2()">
        <option value="">선택</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>

</div>

 

<css> : 기본 디자인만 하였습니다. 중요하지 않습니다.

 .inner {
   width: 100%;
   padding: 10px;
   background-color: #eee;
 }

 .boxBlock {
   width: 90%;
   margin: 15px auto;
   display: flex;
   justify-content: flex-start;
   font-size: 14px;
 }

 .title {
   padding: 5px;
   border: 1px solid #DEDEDE;
   margin-right: 10px;
 }

 .boxForm select {
   padding: 5px;
   border: 1px solid #DEDEDE;
 }

 

· 구현 1 option 선택 값(탐구과목)이 그대로 아래 label 값에 적용
-> 탐구과목의 과목명을 선택하면 아래 탐구 1, 탐구 2 과목명이 선택한 과목명으로 바뀜

<구현 1 결과>

 

· 구현 2: 리셋(option값 선택 후 다시 option값을 선택으로 바꾸었을 때)
-> 탐구과목 과목명 선택하였다가 다시 과목명을 선택으로 리셋하였을 때
1. 아래 label값이 탐구 1/탐구 2로 자동 리셋
2. 아래 수능 등급, 백분위 점수가 선택으로 자동 리셋

<구현 2 결과>

 

· 구현 3: option 선택 값 필수 입력, 선택 안 하여 alert 창 출현
-> 탐구과목 선택 안 하고 탐구 1, 탐구 2 option값 누르면
alert창 "탐구 과목명 선택해주세요" 출현
커서가 탐구과목 선택명 위치

<구현 3 결과>

 

<javascript>

function subFirst(val) {
  var defVal = "탐구1";

  if (val == "") {
    //구현2 reset할때
    //label값(과목명) 초기값으로
    document.getElementById("level1").innerHTML = defVal;
    document.getElementById("score1").innerHTML = defVal;
    //option 점수값 초기값으로 index번호 = 0;
    document.getElementById("choice_1").options.selectedIndex = 0;
    document.getElementById("choice_3").options.selectedIndex = 0;
  } else {
    //구현1
    //매개변수 this.value 값 = val
    //val = document.getElementById("sub_1").options[idx].value;
    //var idx = document.getElementById("sub_1").selectedIndex;
    //매개변수 val이용하여 코드 간단하게 작성
    document.getElementById("level1").innerHTML = val;
    document.getElementById("score1").innerHTML = val;
  }
}

function subSecond(val) {
  var defVal = "탐구2";

  if (val == "") { //해당값이 없을때 같은말: if(!val)
    document.getElementById("level2").innerHTML = defVal;
    document.getElementById("score2").innerHTML = defVal;
    document.getElementById("choice_2").options.selectedIndex = 0;
    document.getElementById("choice_4").options.selectedIndex = 0;
  } else {
    document.getElementById("level2").innerHTML = val;
    document.getElementById("score2").innerHTML = val;
  }

}

function subChoice1() { //구현3
  if (document.getElementById("sub_1").value == "") {
    alert("'탐구1 과목명'을 입력하세요");
    document.getElementById("sub_1").focus();
    return false; //return 반환하다. return false: 아무것도 반환하지 말아라. 아래 코드부터 아무것도 진행하지 말것. 
  }
}

function subChoice2() {
  if (document.getElementById("sub_2").value == "") {
    alert("'탐구2 과목명'을 입력하세요");
    document.getElementById("sub_2").focus();
    return false;
  }
}





여기서 주의할 사항

· 매개변수 활용하면 코드가 훨씬 심플해 집니다. 

onchange = "subFirst(this.value)"
function subFirst(val){ }

· val (매개변수) = 현재 선택된 option value 값
· 매개변수를 활용하지 않았으면 아래와 같은 코드로 사용하게 됩니다.

function subFirst() {
        var idx = document.getElementById("sub_1").selectedIndex;
        var defVal = "탐구1";

        if (idx == 0) {
            document.getElementById("level1").innerHTML = defVal;
            document.getElementById("score1").innerHTML = defVal;
            document.getElementById("choice_1").options.selectedIndex = 0;
            document.getElementById("choice_3").options.selectedIndex = 0;
        } else {
            document.getElementById("level1").innerHTML = document.getElementById("sub_1").options[idx].value;
            document.getElementById("score1").innerHTML = document.getElementById("sub_1").options[idx].value;
        }
    }

 

onclick 보다는 onfocus 이벤트를 사용하는 것이 좋습니다.
· onfocus 속성은 요소가 포커스를 얻는 순간을 발생합니다.
· 클릭 전의 동작이므로 더 우선적으로 이벤트가 발생합니다.

 

한 번에 보기! (result클릭)

반응형
저작자표시 비영리 변경금지

'개발 > Javascript' 카테고리의 다른 글

[js] let vs const vs var (ft. var의 문제점, 호이스팅)  (0) 2020.10.06
[js] 자바스크립트 onclick · addEventListener 비교 사용법  (2) 2020.10.05
[js] 자바스크립트 회원가입 유효성 검사(ft. form input 정규식)  (0) 2020.07.24
[js] 자바스크립트 버튼 클릭시(onclick) 마다 배경 색상 변경하기  (0) 2020.07.13
[js] 버튼 클릭시 마다 이미지 변경 구현 (ft . onclick addEventListener)  (0) 2020.07.12

관련글

댓글

티스토리툴바