获取下拉菜单的选定值

Get selected value of dropdown

本文关键字：下拉菜单 获取      更新时间：2023-09-26

我有一个相当不同的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 ?

你应该得到选项标签，像这样:

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

你可以使用checked作为复选框和单选。

这将为您提供所选项的值:

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

但是，如果您希望所选项目的实际内容(即显示的文本)在选项标签之外，则使用:

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

要获得选中的选项值，您需要在select元素上使用两个属性:options和selectedIndex来获得html选项元素，然后您可以获得值。

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>

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

如果您需要获取'value':

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;

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

获取值可以使用

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

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

document.querySelector('#qtySelect option:checked').text;
相关文章：