jquery - ajax를 사용해 select dropdown list 를 json 데이터로 동적 연결하는 방법

Yuri Lee·2021년 2월 9일
0

목표

db에 담겨있는 데이터 값을 select dropdown list 목록에 표출하고자 한다. 🌻

참고자료

The JSON File

[
    {
        "ID": "001",
        "Name": "Eurasian Collared-Dove" 
        },
    {
        "ID": "002",
        "Name": "Bald Eagle" 
        },
    {
        "ID": "003",
        "Name": "Cooper's Hawk" 
        },
    {
        "ID": "004",
        "Name": "Bell's Sparrow" 
        },
    {
        "ID": "005",
        "Name": "Mourning Dove" 
        }
]

데이터 값을 갖고 있는 json 파일이다.

Html & Javascript

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
    <p>
        <input type="button" value="Fill SELECT Dropdown List with JSON" id="bt" />
    </p>

    <select id="sel">
        <option value="">-- Select --</option>
    </select>

    <p id="msg"></p>
</body>

<script>
    $(document).ready(function () {
        $('#bt').click(function () {
            
            var url = "https://www.encodedna.com/library/sample.json";

            $.getJSON(url, function (data) {
                $.each(data, function (index, value) {
                    // APPEND OR INSERT DATA TO SELECT ELEMENT.
                    $('#sel').append('<option value="' + value.ID + '">' + value.Name + '</option>');
                });
            });
        });

        // SHOW SELECTED VALUE.
        $('#sel').change(function () {
            $('#msg').text('Selected Item: ' + this.options[this.selectedIndex].text);
        });
    });
</script>
</html>

⬇ 각각의 메소드가 궁금하다면 링크 클릭하기 ⬇

결과


https://www.encodedna.com/jquery/dynamically-bind-populate-select-element-with-json-data-using-jquery-ajax.htm

profile
Step by step goes a long way ✨

0개의 댓글