Get selected value from drop down list User Macro

[larry.lowe]

I started with a picklist macro posted by @Stephen Deutsch here: https://community.atlassian.com/t5/Answers-Developer-Questions/Drop-down-list-User-Macro/qaq-p/568720

I am trying to take the selected value from this picklist, and save it as a param in the initial velocity template or save it as a $test variable. I just need to save it anywhere at the top level. Once I am outside of the picklist Ajax script, the selected variable cannot be retrieved. My end goal is to use the picklist value to update a URL for a report, which is being executed from a separate script. So far i have only been able to retrieve the selected value using a class, such as:

<span class="myClass1">null</span>

This class works to display the value to the user, but it cannot be inserted into a URL and utilized in the rest of my code. Here is the current picklist code that i am using:

## @param DropdownId:title=Unique dropdown ID|type=string|required=true|default=1|desc=If more than one dropdown in page, change this to a unique name.
## @param Options:title=Options|type=string|required=true|desc=Enter desired dropdown options separated by a comma.
## @param IncludeBlank:title=Include Blank Option|type=boolean
## @param ShowColors:title=Show Colors|type=boolean|desc=If this option is selected, then blank dropdown = red, filled dropdown = green.
## @param Label:title=Label|type=string|desc=Enter dropdown label, if desired
#set ( $dropdownId = "1" )
#set ( $dropdownId = $paramDropdownId )
#set ( $dropdownId = "dropdown-" + $dropdownId )
#set ( $options = "" )
#set ( $options = $paramOptions )
#set ( $label = "" )
#set ( $label = $paramLabel )
#set ( $toplabel = "" )
#set ( $required = "" )
#set ( $test = "null" )

#if ($paramShowColors == "true")
<style>
#$dropdownId { color:green }
#$dropdownId:invalid { color: red; }
</style>
#set ( $required = 'required="required"' )
#end
#if ( $label == "" )
#set ( $toplabel = "top-label" )
#end
#set ( $pageId = $content.id )
<form class="aui $toplabel">
<div class="field-group">
#if ( $label != "" )
<label for="$dropdownId">$label</label>
#end
<select class="select" id="$dropdownId" name="$dropdownId" $required>
#if ($paramIncludeBlank == "true")
<option> </option>
#end
#foreach ( $option in $options.split(",") )
#set ( $option = $option.trim().replaceAll('"', '' ) ) 
<option value="$option">$option</option>
#end
</select>
</div>
</form>

<script>
AJS.toInit(function() {
var canEdit = true;

#if ( $permissionHelper.canEdit($userAccessor.getUserByName($req.remoteUser), $content) )
jQuery("#$dropdownId").change(function() {
var dropdownObject = this;
jQuery.ajax({
url: contextPath + "/rest/api/content/${pageId}/property/${dropdownId}",
success: function(dropdownData) {
dropdownData.value = jQuery(dropdownObject).val();
alert ("You have selected the team - " + dropdownData.value); 
var output = dropdownData.value;
jQuery(".myClass1").text(output);
dropdownData.version.number += 1;
jQuery.ajax({
contentType: 'application/json',
type: 'PUT',
url: contextPath + "/rest/api/content/${pageId}/property/${dropdownId}",
data: JSON.stringify(dropdownData)
});
},
error: function(response) {
var dropdownData = {};
dropdownData.key = "$dropdownId";
dropdownData.value = jQuery(dropdownObject).val();
jQuery.ajax({
contentType: 'application/json',
type: 'POST',
url: contextPath + "/rest/api/content/${pageId}/property",
data: JSON.stringify(dropdownData)
});
}
});
});

 #else
canEdit = false;
#end

 jQuery.ajax({
url: contextPath + "/rest/api/content/${pageId}/property/${dropdownId}",
success: function(dropdownData) {
jQuery("#$dropdownId").val(dropdownData.value);
if (!canEdit) {
jQuery("#$dropdownId").prop( "disabled", true );
}
}
});
});
</script>

[Radek Dostál]

This is a lot to unpack, with I dare say a bit misleading description actually. Why not simplify and take this line by line?

You can just print the values, in raw form, without any dresses makeups or ceremonies, so you can see what the variable values are when you open a page with the macro. It will just show you on page view.

Once you see the right values, then you can try to make it dance and sing, but trying the whole thing in one go is unnecessarily too much.

I'm relatively sure you don't need the pound to get the variable. Here you do this (at least 2 times):

"#$dropdownId"

which should in my opinion either cause an error in velocity, or just plain not work. The pound is a special character, when you use it, velocity expects a command - not a variable. Just refer to the variable, don't pre-pound it (did I just say that?).