Javascript - 获取下拉菜单的属性

Question

我有这个 HTML 代码：

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

还有这个 JS 代码：

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

我无法从下拉菜单中获取 StartPageName 属性。帮忙？

Answer 1

你快到了 - 你只需要对 <select> 元素而不是 this 执行 .selectedIndex。

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>