jquery 范围滑块值到查询字符串
我正在使用 jQuery UI 范围滑块演示代码 (http://jqueryui.com/demos/slider/# range）来创建价格范围滑块。我想将从该范围滑块中选择的值传输到 minValue & 的获取参数。 最大值。
我一直在尝试通过让 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>
I am using the jQuery UI range slider demo code (http://jqueryui.com/demos/slider/#range) to create a price range slider. I want to transfer the values selected from this range slider to the get params of minValue & maxValue.
I have been trying to do this by getting the JavaScript to update the hidden fields in the form below but this doesn't seem to work as at the moment the page reloads with the URL query string looking like this: ?minValue=&maxValue=&submit=go and no values have been transferred from the range slider. How do I get the values from the range slider to the query string?
Thanks in advance.
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您正在滑块代码之外设置 min/maxValues。将这些行移至
slide回调函数中。You're setting the min/maxValues outside of the slider's code. Move those lines into the
slidecallback function.当您在
document.ready上调用以下两行时，ui变量不存在：您是否检查过
ui变量内部的>slide回调函数来确保您正确访问数据？如果您还没有，请尝试执行此操作，看看您的开发人员工具控制台中会出现什么：此外，文档还说明了您访问这些值的方式：
它返回一个数组，因此我假设要访问您将执行此操作的值：
When you call the following two lines on
document.readytheuivariable does not exist:Have you inspected the
uivariable inside of theslidecallback function to make sure that you are accessing the data correctly? If you have not yet, then try this and see what comes up in your Developer Tools Console:Also the docs state this is how you access the values:
Which returns an array so I assume to access the values you would do this: