Question

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

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

我正在使用jQuery Slider Plugin，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);
    });
});

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

$('#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>

Answer 1

根据doc you provided，您需要使用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/

难以从滑块值设置另一个表单元素的值

1 个答案: