Проблема с ползунком jQuery - время - PullRequest
Новая
       14

Проблема с ползунком jQuery - время

0 голосов
/ 28 декабря 2010

Я бы хотел сделать слайдер для выбора времени (с 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>

Ответы [ 3 ]

1 голос
/ 28 декабря 2010

С помощью jQuery вы можете просто сказать 

select.val('4:30')

в этом нет необходимости: 

select[ 0 ].selectedIndex =  ui.value - 1;
0 голосов
/ 28 декабря 2010

Решено. 

<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>
0 голосов
/ 28 декабря 2010

Теперь это работает на 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>
...