0

別の要素の値が変更された場合、またはその逆の場合はスライダーの値を設定する必要がありますが、別のフォーム要素の値をスライダーの値に設定するのが困難です。

以下の関数は、Select要素の値を変更するとスライダーの値を変更しますが、逆に機能させることはできません。私はここにそれのフィドルを投稿しました：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>
4

1 に答える 1

1

提供したドキュメントによると、を使用する必要がありますonstatechange。また、何らかの理由で、スライダーが機能するためには2つの値が必要です...

$(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 に答える