Javascript 获取下拉列表的选定值

我有一个完全不同的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>

---

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

使用

document.querySelector（“.quantityDropdown select”）。selectedIndex

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

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

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

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

---

要获取所选选项值，您需要在select元素上使用两个属性：

options

和

selectedIndex

来获取html选项元素，然后您可以获取值

const下拉列表=document.querySelector（“.cart quantity picker”）
console.log（'selectedIndex'，下拉列表.selectedIndex）
console.log（'options'，dropdown.options）
console.log（'selected'，dropdown.options[dropdown.selectedIndex].value）

1.
2.
3.
4.

如果需要，请获取“值”：

var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selValue = dropdown.options[dropdown.selectedIndex].value;

但是，如果您想获得文本值，您可以：

 var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
    var selText = dropdown.options[dropdown.selectedIndex].text;

测试1
测试2
测试3

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

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

---

您还可以将选中的用于复选框和收音机。

用于获取您可以使用的值

document.querySelector('#qtySelect option:checked').value;

document.querySelector('#qtySelect option:checked').text;

用于获取选项内的实际文本，您可以使用

document.querySelector('#qtySelect option:checked').value;

document.querySelector('#qtySelect option:checked').text;

---

可能重复的“否，我的不同”暗示使用：选中对当前选定的选项执行操作，然后使用.textContent获取其文本内容