CODEWITHSUNDEEP
javascriptjqueryeventsdrop-down-menumeteor
koramaiku
koramaiku

Reputation: 358

change event on <select> Meteor.js

I know that Meteor supports events and I have seen it in action on checkboxes, but I just wanted someone to be able clarify if we can hook change events in meteor on select dropdowns as like the following

 Template.templateName.events({
     'change select': function(e,t){
        // do whatever.......
     }
 });

I am trying to do this using Meteor and it doesn't seem to be firing when I change the value in the select box. However when I use jQuery to change things then it works fine.

Upvotes: 9

Views: 13101

Answers (4)

ChatGPT
ChatGPT

Reputation: 5617

You can use an event like this to handle multiple checkboxes, then check some property (often id) to see which one was clicked. Or here since this returns my client row, I can just get the value I want from the context.

Template fragment:

 {{#each phonemeResults}}
    <tr>
      <td>
        <div class="checkbox">
          <label>
            <input type="checkbox" class="star">
          </label>
        </div>
      </td>
      <td>
          {{word}}
      </td>
      <td>
        <small>{{phoneme}}</small>
      </td>
    </tr>
  {{/each}}

Event handler:

Template.phonemeList.events({
  'change [type=checkbox]': function(e, t){
    console.log("add " + this.word + " to user's public starred list");
  },
});

Upvotes: 1

jnhdny
jnhdny

Reputation: 16

I have a similar issue. The gotcha was that only the <option> elements were included in my template, and the <select> element was in outside it, in <body>. Make sure that the Template the event map is configured actually contains the <select> element.

Upvotes: 0

Shaun Groenewald
Shaun Groenewald

Reputation: 876

If you want it to fire on a specific select box change:

Template.chatRooms.events({
'change #chatroomList' : function(event){
        console.log("Changed")
      }
})

If you want it to fire on any selectbox change in the template:

Template.chatRooms.events({
    'change select' : function(event){
            console.log("Changed")
          }
    })

Upvotes: 0

Kristoffer K
Kristoffer K

Reputation: 2053

Your code should work, it works fine for me.

Though I think events only take one eventMap-argument, not two. What would the "t" argument be?

Upvotes: 3

Related Questions