jquery范围滑块值查询字符串答案

【问题标题】：jquery range slider values to query stringjquery范围滑块值查询字符串
【发布时间】：2023-03-25 00:59:01
【问题描述】：

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

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

提前致谢。

<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>

【问题讨论】：

标签： jquery query-string uislider

【解决方案1】：

您正在滑块代码之外设置 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 ] );
}

【讨论】：

【解决方案2】：

当您在document.ready 上调用以下两行时，ui 变量不存在：

$( "#minValue" ).val( ui.values[ 0 ] );
$( "#maxValue" ).val( ui.values[ 1 ] );

您是否检查了slide 回调函数内的ui 变量以确保您正确访问数据？如果你还没有，那么试试这个，看看你的开发者工具控制台会出现什么：

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

文档还指出这是您访问值的方式：

var values = $("#slider-range").slider( "option", "values" );

它返回一个数组，所以我假设访问你会这样做的值：

var min = values[0],
    max = values[1];

【讨论】：