accessing object elements from javascript

[flash-map]

<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.

[paul_wilkins]

You can access the field by using the array notation method.

var text = document.myform['selectOption[0].option'].value;

[AllanP]

You need to rewrite the last script to say
var test=document.myform.selectOption.options[0].value;

However, it is better to use the selectedIndex property of the select object when getting the value of a selection. Something like this is fired by an onchange handler on the select object:

<select name="selectOption" onchange="saveSelection(this)">

function saveSelection(obj) { text=obj.options[obj.selectedIndex].value; }

You can then access the value of text in your first script if you have made text a global variable.