[psyang]

It's sort of like a namespace issue. You could solve this in a couple ways.

1) Name the form, then access test2 via the form:

<form id="frm">
Inside Form: <select name="test2" id="test2" >
<option value="One" >One</option>
<option value="Two" >Two</option>
</select>
<a href="javascript:alert(frm.test2.value);">Add1</a>
</form><br/>

2) Use document.getElementById to get the element regardless of the hierarchy:

<form>
Inside Form: <select name="test2" id="test2" >
<option value="One" >One</option>
<option value="Two" >Two</option>
</select>
<a href="javascript:alert(document.getElementById('test2').value);">Add1</a>
</form><br/>

I normally always use document.getElementById, or the equivalent in whatever javascript framework I'm using ($(#) in jquery, Ext.get in extjs) to avoid this issue. The DOM is hierarchical, and I'm actually a little surprised that Firefox and Chrome flatten the hierarchy for form controls.