jQuery 슬라이더 문제 - 시간

Question

시간을 선택할 수있는 슬라이더를 만들고 싶습니다 (1:00에서 4:00까지).하지만 작동하지 않습니다. '선택'과 통신하지 않습니다. 누구든지 나를 도울 수 있습니까?

<script> 
    $(function() { 
     var select = $("#czastrwania"); 
     var slider = $("<div id='slider'></div>").insertAfter(select).slider({ 
     min: 60, 
     max: 240, 
     step: 30, 
     range: "min", 
value: select[ 0 ].selectedIndex + 1, 
      slide: function(e, ui) { 
       var hours = Math.floor(ui.value/60); 
      var minutes = ui.value - (hours * 60); 

      if(hours.length == 1) hours = '0' + hours; 
      if(minutes.length == 1) minutes = '0' + minutes; 
      select[ 0 ].selectedIndex = ui.value - 1; 
      } 
     }); 
     $("#czastrwania").change(function() { 
      slider.slider("value", this.selectedIndex + 1); 
     }); 
    }); 
    </script> 
<select id="czastrwania" name="czastrwania"> 
<option value="1:00">1:00</option> 
    <option value="1:30">1:30</option> 
    <option value="2:00">2:00</option> 
    <option value="2:30">2:30</option> 
    <option value="3:00">3:00</option> 
    <option value="3:30">3:30</option> 
    <option value="4:00">4:00</option> 
    </select> 

Answer 1

jQuery를 사용하면 그냥이에 대한

select.val('4:30') 

필요없이 말할 수 :

select[ 0 ].selectedIndex = ui.value - 1; 

Answer 2

을 지금은 50 % 일하고있다. 슬라이더에서 변경하면 선택시 변경되지만 선택시 값을 변경하면 작동하지 않습니다.

<script> 
    $(function() { 
     var select = $("#czastrwania"); 
     var slider = $("<div id='slider'></div>").insertAfter(select).slider({ 
     min: 60, 
     max: 240, 
     step: 30, 
     range: "min", 
value: select[ 0 ].selectedIndex + 1, 
      slide: function(e, ui) { 
      var hours = Math.floor(ui.value/60); 
      var minutes = ui.value - (hours * 60); 

      if(minutes == 0) minutes = '00'; 
      select[ 0 ].value = hours+':'+minutes; 
      } 
     }); 
     $("#czastrwania").change(function() { 
      slider.slider("value", select[ 0 ].value); 
     }); 
    }); 
    </script> 

Answer 3

해결.

<script> 
    $(function() { 
     var select = $("#czastrwania"); 
     var slider = $("<div id='slider'></div>").insertAfter(select).slider({ 
     min: 60, 
     max: 240, 
     step: 30, 
     range: "min", 
value: select[ 0 ].selectedIndex + 1, 
      slide: function(e, ui) { 
      var hours = Math.floor(ui.value/60); 
      var minutes = ui.value - (hours * 60); 

      if(minutes == 0) minutes = '00'; 
      select[ 0 ].value = hours+':'+minutes; 
      } 
     }); 
     $("#czastrwania").change(function() { 
      slider.slider("value", 60 * select[ 0 ].value.replace(':','.')); 
     }); 
    }); 
    </script>