获取下拉列表的选定值

Question

我有一个相当不同的 HTML 结构，我试图获取下拉列表的选定值，如下面的代码所示：

<div class="quantityDropdown quantityDropdown-cartItem">
    <select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker"
            data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
        <option value="1">1</option>
        <option value="2" selected="">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>

我的代码返回null.

我想得到 2 作为我的值。正如您所看到的，该属性中没有值selected。

var quantity = document.querySelector(".quantityDropdown select").getAttribute("selected");

如何获取选项标签之外的值 2？

Answer 1

您应该获得选项标签，如下所示：

var quantity = document.querySelector(".quantityDropdown select option:checked");

您也可以将checked用于复选框和单选框。

Answer 2

这将为您提供所选项目的值：

quantity = document.querySelector(".quantityDropdown select").value;

但是，如果您希望所选项目的实际内容（即显示的文本）位于选项标记之外，请使用：

var quantity = document.querySelector(".quantityDropdown select")[document.querySelector(".quantityDropdown select").selectedIndex].innerHTML;