如何在javascript解析中获取选项的值

Question

美好的一天，我有一个 HTML 代码，我打算在其中获取所选选项的 innerText

<div class="bag-option">
<div class="bag-option-label">colour:</div>
<div class="bag-option-control">
    <select name='select-colour-0' id='select-colour-0' onchange="onColourSelected(this, '0', '1', 'style-img-thb-', '_WLG.jpg', '_WXL.jpg', '_SKC.jpg');displayUpdateMsg();return false;">
        <option value="0" selected>orchid pink</option>
    </select>
</div>

Answer 1

您可以使用：

document.getElementById("select-colour-0").getElementsByTagName("option")[document.getElementById("select-colour-0").selectedIndex].innerHTML

代码的作用是：

1. 选择<select>标签。
2. 获取所有<option>标签。
3. 获取<select>的selectedIndex 。
4. 使用selectedIndex获取特定的<option>标签。
5. 获取始终是文本的<option>的innerHTML 。

代码的工作演示如下...

片段

 <select name='select-colour-0' id='select-colour-0' onchange="onColourSelected(this, '0', '1', 'style-img-thb-', '_WLG.jpg', '_WXL.jpg', '_SKC.jpg');displayUpdateMsg();return false;"> <option value="0" selected>orchid pink</option> </select> <script> alert(document.getElementById("select-colour-0").getElementsByTagName("option")[document.getElementById("select-colour-0").selectedIndex].innerHTML); </script>