Updating time_select data based on a collection_select option Using Ajax

Question

I have a collection_select that lists all my venues. Each venue has a different open and close time. So i am trying to update my time_select data based on the venue that was selected.

<%= collection_select(:game, :venue_id, Venue.all, :id, :name, prompt: true) %>

Right now i am hardcoding it. I find a specific venue and assign the start_hour and end_hour to the venue's open and close times, like so:

@venue = Venue.find(1)

f.time_select :booked_from, {start_hour: @venue.open_time.to_i , end_hour: @venue.close_time.to_i, minute_step: 30, ampm: true}

f.time_select :booked_till, {start_hour: @venue.open_time.to_i , end_hour: @venue.close_time.to_i, minute_step: 30, ampm: true}

Using javascript, I get the venue id when i select any from the list but cant figure out how to use ajax to update the start_hour and end_hour of the time_select based on the venue selected.

$('#game_venue_id').change(function(){
    var venueId = $("#game_venue_id").find("option:selected").attr('value');
});

Help would be appreciated.

Thank you.

Answer 1

Why no using a jquery? Example

<select class="combo_box"onchange="GetValue(this);"></select> 

function GetValue(this){
        var value = this.value;
    }

regards