[C#] HTML<select> option 동적으로 바꾸기

왼쪽과 같은 모양의 html 이 있다고 가정합니다.

단순히 select tag안에 6개의 option이 있을 뿐입니다.
html 코드는 아래와 같습니다.

<form name="form1">
<select name="FOLDER" >
<option value="">- 편지함 선택 -</option>
<option value="1111" >1111 </option>
<option value="2222" >2222 </option>
<option value="3333" >3333 </option>
<option value="4444" >4444 </option>
<option value="5555" >5555 </option>
<option value="6666" >6666</option>
</select>

option 속성에 seleted 라는 속성을 주면 기본으로 선택된다는 것은 쉽게 알 수 있습니다.

그러나 1111이 선택된  상태에서 프로그램상에서 6666을 선택하려면 어떻게 해야 할까요?

 

[방법1]

가장 쉽게 Javascript를 사용하는 것입니다.
FOLDER라는 SELECT Html Element를 찾아서 selectedIndex 를 바꾸어 주면 됩니다.

<script language=""javascript"">
function change(index)
{
    document.form1.FOLDER.selectedIndex = index;
}
</script>

그리고 위의 change라는 javascript 함수를 WebBrowser 객체에서 InvokeScript 해주면 끝입니다.

…

webBrowser1.Document.InvokeScript("change", new object[]{6});



…

코드 실행 후에는  selectedIndex는 기존 ‘편지함 선택’ index 0 에서 ‘6666’ index 6으로 변경되게 됩니다.

 

[방법2]

별도의 javascript를 사용하지 않아도 C#코드로만  Browser Document에 접근해서 속성을 변경할 수도 있습니다.
제일 먼저 해야 할 작업이 select 태그로 html element 를 찾는 것인데요

webBrowser1.Document.GetElementsByTagName("select")

위의 코드로 dom에서 select 태그를 모두 가지고 왔습니다.
GetElmentsByTagName 함수의 return 타입은 HtmlElementCollection 입니다.
제일 위의 html 코드에서는 select 태그가 하나밖에 없으므로 collection에서 제일 처음 index를 사용하면 되겠죠?

webBrowser1.Document.GetElementsByTagName("select")[0]

위의 코드는 html element collection 에서 지금 우리가 원하는 FOLDER 라는 select 태그를 얻어 온 것입니다.
이 element에 selectedIndex라는 속성을 부여하면 되겠죠?

webBrowser1.Document.GetElementsByTagName("select")[0].SetAttribute("selectedIndex", "6");

위와 같이 하면 별도의 javascript를 사용하지 않고도 쉽게 option을 변경할 수 있습니다.