티스토리 뷰

JAVA/JQuery

<JQuery>동적 SelectBox 제어하기

빨코모 2018. 7. 17. 12:46

    




<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function() {

            $('#Kind').change(function() {

                var dog = ["시추", "말티즈", "코카"];

                var cat = ["고양이", "야옹이", "삼뚝이"];

                var changeItem;

                if (this.value == "dog") {

                    changeItem = dog;

                } else if (this.value == "cat") {

                    changeItem = cat;

                }

                $('#select2').empty();

                for (var count = 0; count < changeItem.length; count++) {

                    var option = $("<option>" + changeItem[count] + "</option>");

                    $('#select2').append(option);


                }

            });

        });


    </script>




-----------------------------------------------------------<Body>-----------------------------------------------------


<select name="Kind" id="Kind">

            <option value="">품종선택</option>

            <option value="dog">개</option>

            <option value="cat">고양이</option>

            <option value="etc">기타</option>

            </select>

                <select id="select2"><option value = "">--소분류입니다--</option></select>




댓글