带有两个选择字段和 ajax 选择数据的 rails 和 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 %>

JavaScript

$(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() 为空？

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);
});