[JS] Select / Option 태그

 

DB의 데이터를 select 태그의 option으로 넣는 경우,

이전 프로젝트에서는 서버에서 불러온 데이터를 jstl태그의 foreach로 뽑아내고 조건문을 걸어서 option값에 할당했었는데

이번 과제에서는 $(document).ready 함수와 ajax로 바로 데이터를 불러왔고 jquery를 활용해서 option값에 할당해줬다.

 

---

 

* jstl & foreach 이용해서 option값 할당. 

<select id="selectBox" name="selectBox">
    <c:forEach items="${list}" var="item">
        <option value="${item.number}">${item.name}</option>
    </c:forEach>
</select>

 

* ajax & jquery (forEach) 이용해서 option값 할당. 

$.ajax({ 
    url  : '/getList'
    , type  : 'POST'
    , async : true
    , data : data
    , header: { "Content-Type": 'application/json; charset-utf-8' }
    , dataType   : "json"
    , success : function(data) {

        // option에 List추가
        data.forEach((item) => {     
            $("#selectBox").append("<option value=" +item.number+ ">" +item.name+ "</option>");
       }) 
       
    }
    , error : function(e) {
       console.log(e);
    }
})

 

---

 

https://myhappyman.tistory.com/61

jQuery - select박스 선택된 값 가져오기

 

SELECT - OPTION 태그 내부에 VALUE값을 지정을 안하는 경우에

jQuery .val() 이나 바닐라 .value로 값을 가져올 경우 text값을 가져오게 되니 유의**