获取下拉菜单的选定值

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

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

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

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

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

Answer 2

使用document.querySelector(".quantityDropdown select").selectedIndex

Answer 3

要获取选定的选项值，您需要在select元素上使用两个属性： options和selectedIndex以获取html option元素，然后即可获取该值。

 const dropdown = document.querySelector('.cart-quantity-picker') console.log('selectedIndex', dropdown.selectedIndex) console.log('options', dropdown.options) console.log('selected', dropdown.options[dropdown.selectedIndex].value) 

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

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

Answer 5

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

Answer 6

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

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

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

Answer 7

为了获得价值，您可以使用

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

为了在选项内获取实际文本，您可以使用

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