두 개의 선택 필드와 ajax 선택 데이터가있는 레일즈와 Jquery-ui.slider

Question

두 개의 선택 필드가 연결된 JQuery-UI 슬라이더로 일부 데이터를 선택하고 싶습니다. HTML.erb

<%= form_tag "/airports/#{@airport.id}/tablo_out/",:remote => 'true', :method => 'get', :id => "timetableaps_search" do %> 
<div id="tablo_form"> 
    <%= select_tag "start_time", options_for_select((DateTime.current.beginning_of_day.to_i..(DateTime.current.end_of_day).to_i).step(1.hour).collect {|x| [Time.at(x).to_s(:time), Time.at(x).utc] } ,params[:start_time]), :onchange => "this.form.submit();"%> 
    <%= select_tag "end_time", options_for_select(((Time.now.beginning_of_day+1.hour).to_i..(Time.now.beginning_of_day+1.day).to_i).step(1.hour).collect {|x| [Time.at(x).to_s(:time), Time.at(x).utc] } ,params[:end_time]), :onchange => "this.form.submit();"%> 
</div> 
<% end %> 

자바 스크립트

$(document).ready(function(){ 

    var container = $('#tablo_form'); 
    var max = $('#start_time').val(); 
    var min = $('#end_time').val(); 

    var rangeSlider = $('<div></div>') 
    .slider({ 
     min: 1, 
     max: 24, 
     step: 1, 
     values: [1, 24], 
     range: true, 
     animate: true, 
     slide: function(e,ui) { 
     $(this) 
      .parent() 
      .find('#start_time') 
      .val(ui.values[0]); 
     $(this) 
      .parent() 
      .find('#end_time') 
      .val(ui.values[1]); 
     }, 
     stop: function(event, ui) { 
     // $.get("#", { start_time: $("#start_time").val(), end_time: $("#end_time").val()}); 
     alert($("#start_time").val()+" "+$("#end_time").val()); 
     } 
    }) 
    .before('<h3>Drag the slider to filter by price:</h3>'); 

    $('#tablo_form').after(rangeSlider).hide(); 
}); 

왜 $ ("#의 start_time을"). val에()와 $ ("#의 END_TIME"). val에()가 null이?

Answer 1

나는 자신을 신뢰하지 않습니다.

$(document).ready(function(){ 
    var max = $('#start_time').val(); 
    var min = $('#end_time').val(); 
    var rangeSlider = $('#slider') 
    .slider({ 
     min: 1, 
     max: 24, 
     step: 1, 
     values: [1, 24], 
     value: $("#start_time").selectedIndex + 1, 
     range: true, 
     animate: true, 
     slide: function(e,ui) { 
     $('#start_time')[0].selectedIndex = ui.value - 1; 
     $('#end_time')[0].selectedIndex = ui.value - 1; 
     $(this) 
      .find('#start_time option:selected').val(ui.values[0]).text(); 
     $(this) 
      .find('#end_time option:selected').val(ui.values[1]).text(); 
     }, 
     stop: function(event, ui) { 
     $.get("#", { start_time: $("#start_time").val(), end_time: $("#end_time").val()}); 
     } 
    }) 
// .before('<h3>Drag the slider to filter by price:</h3>'); 

    $('#tablo_form').after(rangeSlider); 
});