I have been trying for the past 48 hours to build a functioning dropdown menu with Meteor that calls a function with the value of the selected option when selected.
Html Code:
//Part of markets template
<select class="select-pair-drop" id="pairOptions" {{b "change: handleChange"}}>
{{#each pair in tradingPairs}}
<option value="{{pair}}">
<span value="base">{{pair.base}}</span> / <span value="quote">{{pair.quote}}</span>
</option>
{{/each}}
</select>
//JS code in Template.markets.viewmodel
handleChange(event) {
event.preventDefault();
const choice = event.target.value;
console.log(choice); //this always returns "object Object"... even with JSON stringify and other options...
this.doSomethingWithSelectedValue(choice); // need to call a function that takes a pair...
}
Any help would be greatly appreciated! This has been a big hang up for me and I am not sure what I am missing. Please let me know if I can provide any more clarity or information
Hi! And welcome to the Forums! 
A question because I really don’t know: What Frontend are you using? Is his Vue?
Cos it looks like Blaze to me but I never saw that Event syntax?
{{b „Event ...“}}
?
1 Like
Frankly I’m not sure - I believe it is Blaze. I’m working off of another project and this is the syntax they have been using to handle many events. Sorry if that’s unclear - the entire stack is just Meteor and Blaze that also uses virwmodel as far as I know. That syntax is also correctly handling events as far as I can tell.
This seems to be Blaze with ViewModel. Have not used it myself but you can read more about it here: https://viewmodelblaze.azurewebsites.net/blaze
Specifically, you might want to take a look at the events section here: https://viewmodelblaze.azurewebsites.net/docs/bindings#events
As far as I recall ViewModel should be a bunch of syntactic sugar to reduce boilerblate (at the expense of performance). So there might be surprises as to how to move data around.
1 Like
Great - this is a helpful start! Thank you
Hi @manster829, welcome to the forums!
It looks like the issue here is that <select> elements are a pain to work with.
For an onChange handler you need to do a bit more work to get the selected option:
handleChange(event) {
event.preventDefault();
const select = event.target;
const selectedOption = select.options[select.selectedIndex];
const choice = selectedOption.value
console.log(choice);
this.doSomethingWithSelectedValue(choice); // need to call a function that takes a pair...
}
I’ve split it across lines to make it easier to see that you need to grab the selected option element out of the select and take the value from it.
It looks like viewmodel can do that for you using by binding the value of the select to a property, which might save you some effort:
1 Like
Thank you so much for your response! After implementing your code into the project I am still running into an issue where the code is grabbing the correct option tag in the constant selectedOption:
<option value="[object Object]">
<span value="base">WAYNE</span> / <span value="quote">DAI</span>
</option>
And choice is grabbing this value as [object Object]… I am not sure why I cannot access this object? Is there something here that I am missing? Also, this object has none of the properties of the real object (e.g. the each loop is correctly rendering values in the HTML). Furthermore, it is correctly rendering values in the generated options tag which leads me to believe that the object exists/is correctly implemented on the HTML side of things… Thanks again
I wanted to add - I ended up solving my problem! I simply made the value {{pair.base}} and searched in the view model for the matching pair… thank you all for the help! I am loving the meteor experience and I am glad to know the community is a resource for future help
2 Likes
Thank you for the feedback!
Enjoy Meteor…