목표
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>⬇ 각각의 메소드가 궁금하다면 링크 클릭하기 ⬇
결과
.png)
Step by step goes a long way ✨