edited for clarity:

So I have a list of drinks in my selection drop down. Based on what is selected, I want the webpage to render the ingredients that drink has (which I get can get from my tag function drink_joins).

The first problem is the value for the dropdown is set at the first value, even if the user selects a different one.

<select>
{% for drink in drinks %}
<option id="dropdown" value="{{drink.drink_name}}">{{drink.drink_name}}</option>
{% endfor %}
</select>

I.E. here function myFunc(){x = document.getElementById('dropdown').value} will only get the first element in drinks, no matter what is selected in the dropdown.

The second problem is once that is fixed, how can I pass on that value into my tag, without it being in the for loop? For example, {{'Margarita'|drink_joins}} would return the right list but I don't know how to put a variable there instead.

<select>
{% for drink in drinks %}
<option id="dropdown" value="{{drink.drink_name}}">{{drink.drink_name}}</option>
{% endfor %}
</select> 
<p> {{ [needs string of dropdown value] | drink_joins }}</p>

problem