返回已選擇的下拉列表中的項目

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