backbone JS select won't work

Question

i have a backbone JS application, it has a select on the UI, like this:

(template is written in Jade)

select.color
  option(value='-1') --select color--
  option(value='0') red
  option(value='1') blue

the application is like this:

events: 
  'change .color': 'changeColor'

changeColor: () ->
  idx = $(@el).find('.color').val()
  color = $(@el).find('.color').filter(idx).text()
  alert("Color is : #{idx}:#{color}")

however when i ran it, it only printout the correct idx but no text. i tried to use $(@el).find('.color').filter(':selected').text() directly, it wont' work either. anyone can help?

Answer 1

You want to use .find() instead of .filter() as filter will filter the select not the child options. So:

$(@el).find('.color').find(':selected').text()

Ps Backbone automatically adds find to the view for you so:

$(@el).find('.color');

is equivalent to:

@.$('.color')