如何使用 JavaScript 在下拉列表中获取选定值？

在本文中，我们将学习在 Javascript 中获取下拉列表中的选定值。我们可以使用 2 种方法获取值：

• 通过使用 value 属性
• 通过将 selectedIndex 属性与 option 属性一起使用

我们将通过示例了解这两种方法。

方法 1：使用value 属性：

可以使用定义列表的选定元素上的 value 属性找到选定元素的值。此属性返回一个字符串，表示列表中 元素的 value 属性。如果未选择任何选项，则不会返回任何内容。

句法：

selectElement.value

示例：此示例描述了可以为选定元素找到的 value 属性。

HTML

 

    
        How to get selected value in
        dropdown list using JavaScript?
    

 

    
        GeeksforGeeks
    
    
        How to get selected value in dropdown
        list using JavaScript?
    
     
 Select one from the given options:
        
            Free
            Basic
            Premium
        
    
 
 
     
 The value of the option selected is:
        
    
 
 
     Check option 
     
    
    function getOption() {
        selectElement = document.querySelector('#select1');
        output = selectElement.value;
        document.querySelector('.output').textContent = output;
    }
    

 

输出：

价值属性

方法 2：将selectedIndex 属性与option 属性一起使用：

selectedIndex 属性返回下拉列表中当前选定元素的索引。此索引从 0 开始，如果未选择任何选项，则返回 -1。 options 属性返回 下拉列表中所有选项元素的集合。元素根据页面的源代码进行排序。在它之前找到的索引可以和这个属性一起使用来获取被选中的元素。可以使用 value 属性找到此选项的值。

句法：

selectElement.options[selectElement.selectedIndex].value

适当的价值：

• selectedIndex ：用于设置或获取集合中选中的
元素的索引。
• length ：它是只读属性，用于获取集合中
元素的数量。

返回值：通过指定

元素中的所有 元素返回 HTMLOptionsCollection 对象。该元素将在集合中排序

示例：此示例描述了 selectedIndex 属性和 option 属性。

HTML

 

    
        How to get selected value in
        dropdown list using JavaScript?
    

 

    
        GeeksforGeeks
    
    
        How to get selected value in
        dropdown list using JavaScript?
    
     
 
 Select one from the given options:
        
            Free
            Basic
            Premium
        
    
 
 
     
 
 The value of the option selected is:
        
    
 
 
    Check option
    
 
    function getOption() {
        selectElement = document.querySelector('#select1');
        output = selectElement.options[selectElement.selectedIndex].value;
        document.querySelector('.output').textContent = output;
    }
    

 

输出：

带有选项属性的 selectedIndex 属性

JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照这个 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。