[JQuery] - 선택박스(select) 이벤트 처리(값마다 뷰 다르게)

○ 선택박스(select) 이벤트 처리(값마다 뷰 다르게)

- 선택박스(select) 이벤트 처리(값마다 뷰 다르게) <div class="test"> <select name="stbType" id="stbType"> <option value="_0">Design</option> <option value="_1">User</option> <option value="_2">Admin</option> <option value="_3">Dragon</option> </select> <div class="oneView" id="oneView"> <span>입력방법1 : </span><input type="text" readonly /> 링크 </div> <div class="twoView" id="twoView" style="display:none;"> <span>입력방법2 : </span><input type="text" /> </div> <div class="threeView" id="threeView" style="display:none;"> <span>입력방법3 : </span><input type="text" value="" disabled /> </div> </div> <script src="~/Scripts/jquery-3.3.1.min.js"></script> <script type="text/javascript"> // .val()로 얻어 오는 값은 option value이다(_0, _1, _2, _3) $(function () { $('#stbType').on('change', function () { if ($(this).val() == '_0') { $('#oneView').css('display', 'block'); $('#twoView').css('display', 'none'); $('#threeView').css('display', 'none'); } else if ($(this).val() == '_1') { $('#oneView').css('display', 'none'); $('#twoView').css('display', 'block'); $('#threeView').css('display', 'none'); } else { $('#oneView').css('display', 'none'); $('#twoView').css('display', 'none'); $('#threeView').css('display', 'block'); } }); }); </script>