在新页面上提交后的jQuery用户界面范围滑块集值

Question

我正在尝试创建一个jquery范围滑块一个链接！我使用它作为一个列表网站上的过滤器，它显示的结果基于应用的过滤器。我想要的是，每当用户更改滑块时，必须提交表单。我已经成功地实现了这一点。表单操作本身就是相同的页面。这些值通过url传递，尽管每当页面再次加载时，滑块将重置为初始值。我希望滑块保留提交的值。

这是我的全部代码：

<link href="slider.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->

<script>

$(document).ready(function() {

    $( "#slider-3" ).slider({
        range:true,
        min: 0,
        max: 3000,
        values: [ 0, 3000 ],
        slide: function( event, ui ) {
        $( "#price1" ).val(ui.values[ 0 ]);
        $("#price2").val(ui.values[1]);     
    },
    change:function() { 
        $("#highlights").submit(); 
    },

});

$( "#price1" ).val($( "#slider-3" ).slider( "values", 0 ));
$( "#price2" ).val($( "#slider-3" ).slider( "values", 1 ));

});

</script>
<?php

$mincost=$_GET['mincost'];
$maxcost=$_GET['maxcost'];

.....
?>
<form name="highlights" id="highlights" action="mypage.php"   method="GET">
<div id="costslider">
    <div id="slider-3"></div>
    <div id="mincost">
        <input type="text" id="price1" name="mincost" id="mincost"  style="background-color:#fff; border:0; color:#b81010; font-weight:bold;   width: 70px;" value="<?php echo $_GET['mincost'];?>" >
    </div>
    <div id="maxcost">
        <input type="text" id="price2" name="maxcost" style="background-  color:white ; border:0; color:'#b81010'; left: 400px; font-weight:bold; width: 70px;" value="<?php echo $_GET['maxcost'];?>" >
    </div>
</div>
</form>

在这里，我希望表单提交后的最小成本和最大成本值也出现在滑块上。请帮帮忙。非常感谢。

Answer 1

您需要使用“值”选项，从滑块功能。您需要将变量与“值”选项对齐。

以下是代码：

<?php
// check if $_GET['mincost'] exists, if yes set javascript value to $_GET['mincost'], if not put the default value to 0 
// check if $_GET['maxcost'] exists, if yes set javascript value to $_GET['maxcost'], if not put the default value to 300 
?>

<script>
minconst = <?php echo (isset($_GET['mincost'])) ? $_GET['mincost'] : 0 ?>;
maxcost = <?php echo (isset($_GET['maxcost'])) ? $_GET['maxcost'] : 3000 ?>;
</script>

<script>
        $(document).ready(function() {

            $("#slider-3").slider({
                range : true,
                min : 0,
                max : 3000,

                values : [minconst, maxcost],
                slide : function(event, ui) {
                    $("#price1").val(ui.values[0]);
                    $("#price2").val(ui.values[1]);

                },
                change : function() {
                    $("#highlights").submit();
                },
            });

            $("#price1").val($("#slider-3").slider("values", 0));
            $("#price2").val($("#slider-3").slider("values", 1));

        });

    </script>

    <form name="highlights" id="highlights" action="mypage.php"   method="GET">
        <div id="costslider">
            <div id="slider-3"></div>
            <div id="mincost">
                <input type="text" id="price1" name="mincost" id="mincost"  style="background-color:#fff; border:0; color:#b81010; font-weight:bold;   width: 70px;" value="<?php echo $_GET['mincost']; ?>" >
            </div>
            <div id="maxcost">
                <input type="text" id="price2" name="maxcost" style="background-  color:white ; border:0; color:'#b81010'; left: 400px; font-weight:bold; width: 70px;" value="<?php echo $_GET['maxcost']; ?>" >
            </div>

        </div>
    </form>