<select>태그의 option의 value 값

// 추가 작성내용

굳이 this를 사용하지 않고 다른 방법으로도 value을 얻어왔다..

만약 select태그를 div부모로 감싸고 있다고 가정하면

<div class="parent">
	<select name="child">
    	<option ~~~~~
    </select>
<div>
    

// value 값 추출
// script 태그 내
$(".parent").find("select[name='amount']").val();

---

최근 사이드 프로젝트 + 개인 연습 + 포트폴리오 겸 해서 간단하게 클론코딩을 하면서

클론한 홈페이지를 바탕으로 기존에 보이지 않던 기능이나 추가하고 싶은 기능을 추가하는 식으로

프로젝트를 완성해 나가고 있다.

 

의류 쇼핑몰이나 여럿 판매사이트에서 게시물의 갯수를 정할 수 있게 dropdown식으로 만들어놓은

HTML을 본적이 있을텐데 내가 클론하는 사이트도 기본값으로 40개를 보여주는 형태로 만든 <select> 태그가 있었다.

 

<select> 의 경우 자식태그로 <option>을 사용하는데 원하는 <option> ( 갯수 ) 를 클릭하면 

홈페이지가 새로고쳐지면서 내가 클릭한 갯수만큼 나오게 하려 했는데 이게 조금 애먹었다.

각 option에 value 값을 넣어서 해당 value값을 뽑아내고 그 값만큼의 데이터를 전송해서 목록을 새로 뽑아내야 했는데.

구글링을 한 결과 결국에 구현을 했다.

 

<select class="filterSelect" name="amount">
  <option value="10">10개</option>
  <option value="20">20개</option>
  <option value="40">40개</option>
  <option value="60">60개</option>
  <option value="80">80개</option>
</select>

 

 우선 option 중에서 20개를 선택했다고 가정합시다..

filterSelect.on("change", function(e) {

	console.log(this);
    console.log($(this));

})

 

option을 선택하면 일단 selected 속성이 true가 된다는 사실은 일단 알고 있었고

일단 바뀔떄 어떤 데이터가 들어오는지 확인을 해야했다.

 

이때 this 와 $(this)의 차이가 있길래 이것 또한 어떤것이다 라는 정도로만 우선 인지하고 넘어갔다.

this의 경우 이벤트가 발생한 해당 요소가 표시되는데 해당 태그를 개발자도구의 dir($0) 를 통해서 property를 살펴보면  

selectedIndex의 값을 통해서 선택된 option이 몇번째 option인지 파악할 수 있다. 

 

$(this)를 이용하면 Object 형태로 나타나기때문에 $(this)[0]를 가지고 해야함을 기억하면 될 거같다.

 

 

options와 children에 같은 데이터가 들어가 있는데 어떤 것으로 사용해야 더 괜찮은 것인지 알아 봐야 한다..

value값을 뽑아 냈으므로 직접 JS코드로 작성을 해보면 된다.. 

 

내 프로젝트에 사용해야하는 코드는 다음과 같이 작성하였다.

var filterSelect = $(".filterSelect") // jQuery 

filterSelect.on("change", function(e) {
	e.preventDefault();
    
    // this.options === this.children
    var amount = this.options[this.selectedIndex].value;
    // 목록페이지로 이동시키는 데이터를 가진 form ( objForm ) 
    // <input type="hidden" name="amount" value="${pageMaker.cri.amount}" >
    // 해당 태그를 찾아서 value의 값을 amount로 변경
    objForm.find("input[name='amount']").val(amount);
    
    objForm.attr("action", "/clothes/list").submit();

})