Question

我已经将带有控件的jQuery UI范围滑块组合在一起，虽然我也尝试将它绑定到select，以便从下拉列表中选择一个值移动滑块并随控件一起移动选择下拉列表中的值

var gmin = 0;
var gmax = 500;
var s =  $("#slider").slider({
    value: 0,
    min: gmin,
    max: gmax,
    step: 100,
    slide: function(event, ui) {
        $("#select option").val(ui.value);
    }
});

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

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

目前的问题：

上下按钮仅将选择值更改为一个值
从下拉列表中选择一个值也不会移动滑块。

这里有任何提示，因为我遗憾地缺乏一些知识。

FIDDLE：http://jsfiddle.net/nrNX8/517/

Answer 1

select的问题是因为您需要设置val()本身的select，而不是text()内所有option元素的change它

然后，您可以挂钩select的{{1}}事件，使用所选值更新滑块，如下所示：

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

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

$('#select').change(function() {
    s.slider('value', $(this).val());
});

Updated fiddle

Answer 2

在select元素的change事件中添加此代码块。

$("#select").change(function(e){
      s.slider('value',  e.target.value);   

});

带有控件的滑块绑定到选择

2 个答案: