Question

我已经设置了带控件的JQuery UI范围滑块，但是当点击控件时，发送到选择下拉列表的值不会更新。我怎么能解决这个问题？

var gmin = 0;
var gmax = 500;

var s =  $( "#slider" ).slider({
    value:5,
    min: gmin,
    max: gmax,
    step: 100,
    slide: function( event, ui ) {
        $( "#select span" ).html(ui.value);
    }
});
$('#down').click(function() {       
    s.slider('value', s.slider('value') + s.slider( "option", "step" ) );   
});

$('#up').click(function() {
    s.slider('value', s.slider('value') - s.slider( "option", "step" ) );   
});

查看JSFiddle

Answer 1

您需要使用change事件，而不是slide。 slide()仅捕获手动用户幻灯片，而非程序化幻灯片：

var s =  $( "#slider" ).slider({
    value:5,
    min: gmin,
    max: gmax,
    step: 100,
    change: function( event, ui ) {
        $( "#select span" ).html(ui.value);
    }
});

（任何原因你的向下按钮让它上升，反之亦然？）

Answer 2

由于此事件不会为此元素存储值，此外还有解决方法：

http://jsfiddle.net/nrNX8/514/

你必须添加

$('#select span').text(s.slider('value'));

对于要在任何更新中设置的任何元素，它可能很有用。

Answer 3

您只需将此行添加到点击功能：

var serverReport = new ServerReport
{
    ReportServerUrl = $"{protocol}://{server}/ReportServer";
    ReportPath = $"/Reports/{report.ReportName}";
};

...在$( "#select span" ).html(s.slider('value'));和#up听众身上。

然而，似乎Ivan的回答是比我的更好的方法

Jquery ui滑块控制不更新值

3 个答案: