Return Selected Drop Down Item in a form

Ok I have been trying all sorts of things trying to figure this out and am failing miserably. I am using Google Tag Manager and following along on one of Simo’s blog posting. In the section where he details how to capture the selected item he uses code:

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

Context: “To capture the selected item value in a drop-down list, checking for the value of the list itself will not work, as you’d intuitively expect. Instead, you need to access the option in the list that was selected, and then capture its value. Description: First, the script retrieves the drop-down list with ID selectListId. Next, it returns the value of the selected option in the list. If the list does not exist, the script returns undefined.

The form I am working with uses classes instead of ID’s for the elements so I would have thought using “.” instead of “#” would solve my problem but no luck. Ie I used:

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

Any solutions on how to properly make this work as a custom javascript variable?

Here is the html I am working with:

[CODE]<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>[/CODE]

Also in #JavaScript _↴