Jquery) 박스에서 옵션 설정했을 때 화면 다르게 나오게 하기

1. 박스에서 옵션을 선택하면 각각 다른 화면이 나와야 하는 상황

<select id="board_mode">
  <option value="board">거래이력</option>
  <option value="contract">계약서</option>
</select>

두 옵션을 두고 선택했을 때 각각 다른 화면이 나와야 한다.

 

2. 기본 화면이 아닌 부분을 div로 묶어준 후에 안보이게 설정해 준다.

안보일 부분에 해당하는 부분은 블록체인에서 정보를 기록하고 조회해오고 DB와 비교를 하는 부분이다.

                            <div style="display:none" id="contract_display">
                                <p class="col-lg-3 col-md-3 pt-3">계약서<span style="color: red;">*</span></p>
                                <div class="col-lg-9 col-md-9" style="padding-top: 10px;">
                                    <input type="file" class="col-lg-10" name="contract" id="contract" required>
                                </div>
                                <div class="col-lg-3 col-md-3">
                                    <input class="col-lg-3 col-md-3" type="button" class="btn btn-light" id="filecheck" value="계약서 공증"/>
                                </div>
                                <p class="col-lg-3 col-md-3 pt-3">파일의 해시값<span style="color: red;">*</span></p>
                                <div >
                                    <input type="text" class="col-lg-10" readonly style="display:inline" id="file_hash" value="파일의 해시가 기록될 곳" />
                                </div>
                                    <input class="col-lg-3 col-md-3" type="button" class="btn btn-light" id="get_hash" value="해시값 확인"/>
                                <p class="col-lg-3 col-md-9">ether scan<span style="color: red;">*</span></p>
                                <div class="col-lg-9 col-md-9" style="padding-top: 10px;">
                                    <input type="text" class="col-lg-10" id="txurl" readonly style="display:inline" value="이더스캔 링크가 기록될 곳"/>
                                </div>
                                <p class="col-md-2 pt-2">Blockchain Hash<span style="color: red;">*</span></p>
                                <div class="col-lg-9 col-md-9" style="padding-top: 10px;">
                                    <div id="file_hash_blockchain">
                                        <a type="text" class="col-lg-10" readonly style="display:inline">스마트컨트랙트에서 불러온 값이 기록될 곳</a>
                                    </div>
                                </div>
                            </div>

 

 

3. 해당 부분을 계약서 작성을 클릭할때만 show를 시켜주면 된다.

        $("#board_mode").change(function(){
            if($("#board_mode").val()=="board"){
                alert("거래이력 작성!")
                $("#contract_display").hide();
            }else{
                alert("계약서 작성!")
                $("#contract_display").show();
            }
        })