jQuery 같은 클래스명 selectbox 선택시 같은 클래스명 textbox에 값 넣기

개발을 하다보면 배열로 컨트롤들을 나열하고 이 컨트롤들을 제어할 필요가 생긴다.

jQuery를 통해 동일한 클래스명으로 처리하면 쉬운데

막상 하려면 조금 난해해진다.

다음과 같이 컨트롤들이 테이블에 나열했다 쳐보자

선택	값
<selectbox class="SELECT_BOX" name="SELECT_BOX">	<input type="text" class="TEXT_BOX" name="TEXT_BOX">
<selectbox class="SELECT_BOX" name="SELECT_BOX">	<input type="text" class="TEXT_BOX" name="TEXT_BOX">
<selectbox class="SELECT_BOX" name="SELECT_BOX">	<input type="text" class="TEXT_BOX" name="TEXT_BOX">
<selectbox class="SELECT_BOX" name="SELECT_BOX">	<input type="text" class="TEXT_BOX" name="TEXT_BOX">
<selectbox class="SELECT_BOX" name="SELECT_BOX">	<input type="text" class="TEXT_BOX" name="TEXT_BOX">

하고자 하는 작업은 셀렉트박스를 선택하면 선택된 값을 해당 라인에 위치한 텍스트박스에 넣어주는 작업이다.

이 경우 closest을 사용하면 되겠다.

closest을 사용해 해당 row를 갖고온 후 그 row속에서 접근하고자 하는 컨트롤의 클래스명으로 접근 후

선택된 값을 넣어주면 끝난다.

        $(".SELECT_BOX").change(function(e) {

            e.preventDefault();

        

            var row = $(this).closest('tr'); // 일단 현재 선택한 셀렉트박스가 속한 tr을 찾은 후

            var findControl = row.find('.TEXT_BOX'); // tr에 속한 클래스만 찾아내면 손쉽게 텍스트박스를 발견 할 수 있으며

            findControl.val($(this).val()); // 발견한 텍스트박스에 현재 선택한 셀렉트박스의 값을 넣어주면 끝

        });  

개쉽다.