<script>
function addString() {
  var text = document.myform.selectOption.value;
  var testNode = document.getElementById('test');
  var newNode = document.createElement('b');
  newNode.setAttribute("id",text);
  newNode.innerHTML = text;
  testNode.appendChild(newNode);
}
</script>

<form name="myform" method="post" action="action">
<select name="selectOption">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
</select>

<input name="Add1" type="button" class="formtext" value="Add"  onclick="addString();">

<p id="test"></p>
</form>

I'm using javascript to grab the value picked from a dropdown menu and populate it below, which it works fine with the code above.
The problem is that if I make the following change to the select name my javascript doesn't work anymore:

<script>
...
var text = document.myform.selectOption[0].option.value;
...
</script> 

<form>
<select name="selectOption[0].option">
...
</form>

I get an error saying that document.myform.selectOption.0 is null or not an object

How can I achieve the above using this sort of names, the name has to be this form, I cannot change it because they are an array of objects.

Thanks in advanced.

selectOption.option[0].value