Javascript - get attribute of dropbox menu

Issue

I have this HTML code:

<select id="ITAAServerList" name="ITAAServerList" style="visibility:visible">
     <option ServerName="SERVER01" IPAddress="192.168.46.1" StartPageName="SERVER01_Start.html">SERVER01</option>
     <option ServerName="SERVER02" IPAddress="192.168.46.2" StartPageName="SERVER02_Start.html">SERVER02</option>
     <option ServerName="SERVER03" IPAddress="192.168.46.3" StartPageName="SERVER03_Start.html">SERVER02</option>
</select>
<button type="submit" name="oNext" id="oNext" onclick ="OnClickNext()" class="item cursor-pointer login-button">LOGIN</button>
...
<script type="text/javascript" src="onclicknext.js"></script>

And this JS code:

function OnClickNext() {
    var oITAAServer = document.getElementById('ITAAServerList').options[this.selectedIndex].getAttribute('StartPageName');  
    alert(oITAAServer);
};

I can't get StartPageName attribute from the dropdown menu. Help?

Solution

You're almost there - you just need to do .selectedIndex against the <select> element instead of against this.

function OnClickNext() {
    var selectElement = document.getElementById('ITAAServerList');    
    var selectedOption = selectElement.options[ selectElement.selectedIndex ];  //not this.selectedIndex   
    var oITAAServer = selectedOption.getAttribute('StartPageName');  
    alert(oITAAServer);
};

<select id="ITAAServerList" name="ITAAServerList" style="visibility:visible">
     <option ServerName="SERVER01" IPAddress="192.168.46.1" StartPageName="SERVER01_Start.html">SERVER01</option>
     <option ServerName="SERVER02" IPAddress="192.168.46.2" StartPageName="SERVER02_Start.html">SERVER02</option>
     <option ServerName="SERVER03" IPAddress="192.168.46.3" StartPageName="SERVER03_Start.html">SERVER03</option>
</select>
<button type="submit" name="oNext" id="oNext" onclick ="OnClickNext()" class="item cursor-pointer login-button">LOGIN</button>

Answered By - Duncan Thacker