jquery 范围 slider 值到查询字符串

Question

我正在使用 jQuery UI 范围 slider 演示代码 ( http://jqueryui.com/demos/slider/#range ) 创建价格范围 slider 。我想将从范围 slider 中选择的值传输到 minValue 和 maxValue 的获取参数。

我一直在尝试通过让 JavaScript 更新下面表单中的隐藏字段来实现此目的，但这似乎不起作用，因为目前页面重新加载时 URL 查询字符串如下所示: ?minValue=&maxValue=&submit=go 并且没有从范围 slider 传输任何值。如何获取范围 slider 中的值到查询字符串？

提前致谢。

<script type="text/javascript" language="javascript">
$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 1,
        max: 3000,
        values: [ 1, 300 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ]);
        }
    });
    $( "#amount" ).val( "£" + $( "#slider-range" ).slider( "values", 0 ) + " - £" + $( "#slider-range" ).slider( "values", 1 ) );
    $( "#minValue" ).val( ui.values[ 0 ] );
    $( "#maxValue" ).val( ui.values[ 1 ] );
});
</script>

<form action="">
    <div id="slider-range"></div>
    <label for="amount">Price range:</label><input type="text" id="amount" style="border:0; color:#28b1ff; font-weight:bold;" />
    <input id="minValue" name="minValue" type="hidden" />
    <input id="maxValue" name="maxValue" type="hidden" />
    <input id="randomGiftButton" type="submit" name="submit" value="go" />
</form>

Answer 1

您正在 slider 代码之外设置 min/maxValues。将这些行移动到 slide 回调函数中。

slide: function( event, ui ) {
    $( "#amount" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ]);
    $( "#minValue" ).val( ui.values[ 0 ] );
    $( "#maxValue" ).val( ui.values[ 1 ] );
}