0

如果另一个元素的值发生变化，我需要设置滑块的值，反之亦然，但是我很难将另一个表单元素的值设置为滑块的值。

当 Select 元素的值更改时，下面的函数会更改 Slider 的值，但我无法让它反向工作。我在这里发布了一个小提琴：http: //jsfiddle.net/chayacooper/v3gUg/28/

我正在使用jQuery Slider 插件、jquery-1.8.2 和 jquery-ui-1.9.1。

JS

$(document).ready(function () {
    var select = $("#SliderSelect");
    jQuery("#Slider").slider({
        from: 1,
        to: 5,
        scale: ['Dislike', '', '', '', 'Love'],
        limits: false,
        step: 1,
        dimension: '',
        skin: "classic",
        change: function (evt) {
            $("#SliderSelect")[0].value = $(evt.target).slider("value");
        }
    });
    $("#SliderSelect").change(function () {
        jQuery("#Slider").slider("value", this.selectedIndex + 1);
    });
});

我也试过用这个语句替换代码并使用文本框而不是选择元素，结果相同

$('#text_value').val( $(evt.target).slider("value") );

HTML

<div class="layout-slider">
    <div id="Slider" type="slider" name="area" value="3"></div>
</div>  
<select name="SliderSelect" id="SliderSelect">
    <option>1</option>
    <option>2</option>
    <option selected=selected>3</option>
    <option>4</option>
    <option>5</option>
</select>
4

1 回答 1

1

根据您提供的文档，您需要使用onstatechange. 此外，出于某种原因，滑块需要两个值才能工作......

$(document).ready(function () {
    var select = $("#SliderSelect");
    jQuery("#Slider").slider({
        from: 1,
        to: 5,
        scale: ['Dislike', '', '', '', 'Love'],
        limits: false,
        step: 1,
        dimension: '',
        skin: "classic",
        onstatechange: function (evt) {
            //evt.target was causing internal error
           // $("#SliderSelect").val($(evt.target).slider("value"));
           $("#SliderSelect").val(evt);
        }
    });
    $("#SliderSelect").change(function () {
        jQuery("#Slider").slider("value", this.selectedIndex + 1, this.selectedIndex + 1);
    });
});

演示：http: //jsfiddle.net/dirtyd77/v3gUg/30/

于 2013-03-18T19:19:28.407 回答