JQuery&Javascript

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

Riucc 2019. 10. 9. 22:50

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

 

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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>
cs


저작자표시