본문 바로가기

개발

[jquery]다중 셀렉트 박스 값 가져오기

여러개의 selectbox 에서  선택된 값 찾기  

spring을 하면서 안하던 javascript를 하게되니 셀렉트 박스에잇는 값가져오는것부터 쉽지않았다.

값을 가져오는 방식은 많지만 간결하게 가져올수 있는 방법을 찾아야한다.

왜냐하면 화면에서 처리하는 값는이 너무많기에 코드가 길어지는걸 방지하고 유지보수할대 쉽게 관리하기 위해서 이다.

 

나는 아래그림과같이 여러개의 셀렉박스의 값을 간편하게 가져오고싶엇다.

 

위와 같은 6개의 셀렉트 박스의 값 한번에 가져오기위해서는 

 

해당 태그의 이름을 하나로 묶는다. ex) name="selectedBox"

묶은 태그를 불러온다 ( 배열로 가져옴 ) 

가져온 태그를 each를 사용하여 각가 불러온다.

각각 불러온 element의 value값을 꺼낸다.

꺼낸 값을 내가만든 배열에 저장한다

 

<html>

//아래와같은 셀렉박스가 여러개 있을 경우 x6

<select id=""  name="selectedBox" class="width100p select-search-hide">

  <option value="-1">선택하세요</option>
  <option value="0">감자</option>
  <option value="1">고구마</option>
  <option value="2">수박​</option>
  <option value="3">오이​</option>
  <option value="4">호박​</option>
  <option value="5">당근​</option>
   <option value="6">사용 안함​​</option>

 </select> 

 

 

<javascript>

var valueArray = new Array(); // 값을 담을 배열

 

//셀렉트박스에 있는 값을 하나씩 꺼내 배열에 담는 로직

$('select[name=selectedBox] option:selected').each(function(index){

 var num=$(this).attr('value');

 valueArray.push(num);

});

 

 

-더 좋은 방법이있거나 오류가있다면 댓글로 남겨주세요 ㅠ