返回已选择的下拉列表中的项目

Question

我需要从窗体中的下拉菜单中返回用户点击的选择的值。我一直在试图想出各种各样的事情，并且失败了。我正在使用Google跟踪代码管理器，并遵循Simo的某篇博客文章。在那里他详细介绍了如何捕捉到所选项目的部分他用代码：

function() { 
    var selectList = {{Form Element}}.querySelector('#selectListId'); 
    return selectList ? selectList.options[selectList.selectedIndex].value : undefined; 
} 

语境：“要捕捉的下拉列表中选择的项值，检查列表本身将无法正常工作的价值，你可以直观地看到它，而是需要访问列表中选择的选项，然后捕获它的值。说明：首先，脚本检索ID为selectListId的下拉列表，然后返回如果列表不存在，则该脚本返回undefined。

我正在使用的表单使用类而不是ID的元素，所以我会想用“。”代替“＃”会解决我的问题，但没有运气。即我使用过：

function() { 
    var selectList = {{Form Element}}.querySelector('.SelectDropdown.js-dropdown-usertype'); 
    return selectList ? selectList.options[selectList.selectedIndex].value : undefined; 
} 

任何解决方案如何正确使这项工作作为自定义JavaScript变量？

这里是我一起工作的HTML：

<form id="submit_interest_fish" class="js_prevalidation_form"> 

<select class="SelectDropdown js-dropdown-usertype" required=""> 

<option value="New" selected="">I'm New Here</option> 

<option value="Pro">I'm a Pro User</option> 

</select> 

Answer 1

是很简单的选择项的值存储在使用jQuery作为一个js变量 -

let selectVal; 
let selectList = $('.SelectDropdown.js-dropdown-usertype'); 
$(selectList).change(function() { 
    selectVal = value($(this)); 
    console.log(selectVal); 
}); 
function value(selectList) { 
    return selectList ? selectList.val() : undefined; 
}