알이즈웰

Select Box의 값 중 특정 값 selected 본문

Programming/Front-End

Select Box의 값 중 특정 값 selected

2017. 5. 11. 17:00

회원가입>이메일 입력>이메일 목록을 selectBox로 가져와서 선택할 수 있게 하되, 직접입력 시 목록에 없는 이메일 주소도 입력 가능하도록 하는 기능에서 수정사항이 나왔다.


목록에 없는 이메일을 입력했을 경우 수정화면에서 해당 selectBox에서 selected 할 값을 못 찾아서 디폴트인 "선택" 문구가 선택되지 않고 빈칸이 나오는것.



JSP


<select class="form_seletBox form_seletBox04" style="width:70px;" name="memEmailTriple" onchange="emailChk.emailSet();"> 

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

<c:forEach var="result" items="${emailList}" varStatus="status">

<option value="${ result.cdNm }">${ result.cdNm }</option>

</c:forEach>

</select>




Java Script


//회원정보수정 화면 진입 시 ajax로 가져온 데이터를 뿌리는 방식으로 개발함

$("select[name=memEmailTriple]").val(email[1]).prop("selected", true);



이슈 : selectBox에 그려진 목록에 없는 이메일로 저장했었던 경우 상세화면에서 이메일주소 selectBox의 option 중 해당 이메일과 같은 값이 없으므로, selectBox가 빈값으로 노출됨(디폴트값인 "선택"으로 노출되어야함)





수정 Java Script


//회원정보수정 화면 진입 시 ajax로 가져온 데이터를 뿌리는 방식으로 개발함

$("select[name=memEmailTriple]").find("option").each(function(index){

if( $(this).val() == email[1] ){

$("select[name=memEmailTriple]").val(email[1]).prop("selected", true);

}

});


수정 방법 : 메일주소 selectBox의 값들 중 해당 회원의 이메일 주소와 같은 값이면 selected하는 조건을 추가함









Comments