attach a selected dropdown value to a variable and reuse it in html code

Question

<script type="text/javascript">
    var productStoreId = $('#productStoreId').val(); //productStoreId on change event
</script>

<select name="productStoreId" id="productStoreId">
    <option value='' selected="selected">Select Location</option>
    <#list productStoreList as store>
        <option value='${store.productStoreId}'>${store.storeName}</option>
    </#list>
</select>

<#assign AvblCrseList=prodStoreCoursesMap.get(${productStoreId})>// but productStoreId is undefined here.

I want productStoreId in a variable, because I have a map "prodStoreCoursesMap". I have to access it using the key productStoreId.

I want to access a map using the variable in the script tag as a key in the code in html/ftl.

Answer 1

<script type="text/javascript">
var productStoreId = $('#productStoreId').val(); // productStoreId on change event
</script>   

This will only work at launch but won't update as you select from the dropdown.

Try this:

var productId;

$('#productStoreId').on('change', function(){
    productId = $(this).val();
});