GridView 컨트롤안의 DropDownList 선택한 값을 javascript 로 가져오기

자~~ 먼저 GridView 안에 dropdownlist 컨트롤을 넣지 않고, 먼저 그냥 화면에 dropdownlist 컨트롤을 두고

자바스크립트로 가져오는 부분을 먼저 해보죠.

 

먼저 aspx 화면단에 만들어 봅시다.

 

 

간단하죠? 0nchange 함수를 이용하여 선택한 객체값을 this.value 로 넘겨서 GetValue 라는 자바스크립트 함수를 호출합니다. 그러면 아래와 같이 선택한 value 값이 경고창으로 보여줄겁니다.

 

 function GetValue(strValue)
 {

    alert!(strValue);

 } 

 

이제 사용하는 방법을 알았으니... 이제 GridView 컨트롤 안에 넣은 Dropdownlist 컨트롤의 선택한 값을 가져오도록 구현해 보죠. 디자인 화면에 아래와 같이 만들어 봅니다. 

GridView 컨트롤에 2개의 dropdownlist 컨트롤을 두었고요. 이제 0nchange 함수를 코드비하인드 단에서 넣어야 겠는데요.

바인딩 후에 발생하는 RowDataBound 이벤트를 이용하여 0nchanage 함수를 넣어보죠.

위의 페이지를 html 랜더링 하면 어떻게 나올까요? 리스트가 여러개 일경우 , id 값이 다소 다르겠죠? 

랜더링 되면서 dropdownlist 의 id 값을 자바스크립트로 가져오기 위해서 위의 코드를 보시면 아시겠지만, 컨트롤.ClientID 를 이용하여 해당 랜더링된 id 값을 얻어 낼 수 있습니다. 이는 랜더링된 페이지의(HTML 페이지겠죠) 컨트롤을 인식하기 위한 고유 아이디라고 간단히 생각하시면 됩니다. 더 상세히 알고자 하신다면, 남처리님의 블로그에 가시면 상세히 정보를 얻으실 수 있습니다. [http://blog.naver.com/nclovehs?Redirect=Log&logNo=150026370480]

보시면 아시다시피... ddl1 과 ddl2 의 dropdownlist 컨트롤이 랜더링 되면서 앞에 GridView1_ctl 다음에 순차적으로 증가되는 것을 보실 수 있습니다. ctl 부분은 control 약자로 표기한듯 합니다. dropdownlist 의 id 가 각각 row 마다 다르기 때문에 DOM 으로 접근이 가능합니다. 따라서 document.getElementById 로 해당 컨트롤 id 에 접근하여 선택한 value 값을 얻을 수 있습니다.

 

이용할 자바스크립트를 이제 사용해 보죠..

 

    function SelectPhoneFax(ddl1)
    {        
        alert!(GetObject(ddl1).value);
    }
    
    function GetObject(ctrlname)
    {
        return document.getElementById(ctrlname);
    }
    
    function GetValue(str)
    {
        alert!(str);
    }

 

document.getElementById(컨트롤id).value 로 선택한 값을 가져올 수 있습니다.

 

 

posted by - 심재운(shimpark@gmail.com)