我正在尝试使滑块值保持在按下SEARCH按钮时将其移动到的位置。只要按下搜索，它们就会默认返回到初始值。我已经尝试过各种方法，但似乎没有任何效果。任何帮助，将不胜感激。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/jquery-ui.css">
</head>
<body>
<form method="post" id="formMain">
<label>Price Range</label>
<div>
<div id="slider-range" ></div>
<input type="hidden" name="price_l" id="price_l" value="<?php echo
(isset($_REQUEST["price_l"])?$_REQUEST["price_l"]:"50000")?>"/>
<input type="hidden" name="price_h" id="price_h" value="<?php echo
(isset($_REQUEST["price_h"])?$_REQUEST["price_h"]:"400000")?>"/>
<input type="text" name="text" id="amount" disabled="" />
</div>
<div>
<input type="submit" value="Search">
</div>
</form>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
var siteSliderRange = function() {
$( "#slider-range" ).slider({
range: true,
min: 5000,
max: 450000,
step: 5000,
values: [ 50000, 400000 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
// when the slider values change, update the hidden fields
$("#price_l").val(ui.values[ 0 ]);
$("#price_h").val(ui.values[ 1 ]);
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
};
siteSliderRange();
</script>
</body>
</html>
考虑下面的示例，该示例使用localStorage在浏览器中存储滑块值。
https://jsfiddle.net/Twisty/e28pqhy9/11/
HTML
<fieldset class="ui-widget">
<legend>Price Range</legend>
<div class="content">
<div id="slider-range"></div>
<div id="amount"></div>
<button>Search</button>
</div>
</fieldset>
JavaScript
$(function() {
function getValues(k) {
if (k == undefined) {
return false;
}
var v = localStorage.getItem(k);
if (v != null) {
return JSON.parse(v);
} else {
return -1;
}
}
function setValues(k, v) {
if (k == undefined || v == undefined) {
return false;
}
localStorage.setItem(k, JSON.stringify(v));
}
function showRange(tObj, v) {
tObj.html("$" + v[0] + " - $" + v[1]);
}
function searchRange(q) {
$.post("searchRange.php", {
price_l: q[0],
price_h: q[1]
}, function(response) {
// Do the needful
})
}
function siteSliderRange(tObj) {
tObj.slider({
range: true,
min: 5000,
max: 450000,
step: 5000,
values: [50000, 400000],
slide: function(event, ui) {
showRange($(this).next(), ui.values);
},
stop: function(e, ui) {
setValues($(this).attr("id"), ui.values);
}
});
}
function init() {
var cVal = getValues("slider-range");
if (cVal != -1) {
showRange($("#amount"), cVal);
siteSliderRange($("#slider-range"));
$("#slider-range").slider("values", cVal);
} else {
showRange($("#amount"), [50000, 400000]);
siteSliderRange($("#slider-range"));
setValues("slider-range", [50000, 400000]);
}
$(".content button").click(function() {
searchRange($("#slider-range").slider("values"));
});
}
init();
});
这将在初始化时检查localStorage，以查看是否已存储任何值。如果不是，则将50000和400000设置为默认值。如果有一个值，它将被同时加载到Slider和显示区域。远离Form模型将为您增加安全性。通过手动启用“文本”字段，某人输入自己的值的机会较小。
[当用户移动滑块时，将更新显示。当他们stop时，它会更新localStorage。这样可以确保如果他们刷新页面或稍后导航，则Slider会重新调用他们的选择。
单击“搜索”按钮时，将执行AJAX发布，这会将数据发送到PHP，并希望将某些结果传回。我认为这些结果将附加到页面上。
更新
PHP的新示例：https://jsfiddle.net/Twisty/e28pqhy9/20/
如果要回显PHP值，则可以执行此操作，只需调整JS来查找这些值。
HTML
<form>
<fieldset class="ui-widget">
<legend>Price Range</legend>
<div class="content">
<div id="slider-range"></div>
<div class="amount-display"></div>
<input type="hidden" id="amount" value="<?php echo $price_l . ',' . $price_h ?>" />
<button type="submit">Search</button>
</div>
</fieldset>
</form>
JavaScript
$(function() {
function getValues() {
return $("#amount").val().split(",");
}
function setValues(v) {
$("#amount").val(v.join(","));
}
function showRange(tObj, v) {
tObj.html("$" + v[0] + " - $" + v[1]);
}
function siteSliderRange(tObj) {
tObj.slider({
range: true,
min: 5000,
max: 450000,
step: 5000,
values: getValues(),
slide: function(event, ui) {
showRange($(this).next(), ui.values);
},
stop: function(e, ui) {
setValues($(this).attr("id"), ui.values);
}
});
}
function init() {
var cVal = getValues();
showRange($(".amount-display"), cVal);
siteSliderRange($("#slider-range"));
}
init();
});
提交表单后，$_POST['amount']将是一个字符串，您可以使用它来将其转换回：
PHP
$amounts = explode(",", $_POST['amount']);
$price_l = (int)$amounts[0];
$price_h = (int)$amounts[1];