Filter select options using jquery

Question

I have a select menu where the text for each option starts with a keyword (i.e. - "Nike Running Shoes"...Nike being the keyword). I want to have a second static select that contains a list of keywords...and then be able to filter the second list options by the keyword selected.

So, if user chose keyword "Nike", the second list would be filtered to only include options who test starts with "Nike".

this is the jquery I've created so far...but its not working

jQuery ->
subjects = $('#subject_select').html()
$('#keyword_select').change ->
    keyword = $('#keyword_select :selected').text()
    options = $(subjects).filter("option[text^='#{keyword}']").html()

    if options
        $('#subject_select').html(options)
    else
        $('#subject_select').empty()

adding "alert options" produced "undefined". The line I need help with is:

 options = $(subjects).filter("option[text^='#{keyword}']").html()

This is an easy task when dealing with two models that are associated. In my case they are not associated (which is why I am using static keywords).

Answer 1

Edit-

Here's a working fiddle: http://jsfiddle.net/WZYzd/

You had a couple issues, the largest of which is that the option element doesn't have a text attribute, so I changed the filter like so:

options = $(subjects).filter(function() {
    return $(this).text().indexOf(keyword) == 0;
});