javascript - jQuery ui 范围 slider 在新页面上提交后设置值

Question

我正在尝试创建一个 jquery ui 范围 slider a link !。我将它用作列表站点上的过滤器，该站点根据应用的过滤器显示结果。 我想要的是每当用户更改 slider 时，必须提交表单。我已经成功地实现了这一点。表单操作是同一页面本身。这些值通过 url 传递，尽管每当页面再次加载时， slider 都会重置为初始值。 我希望 slider 保留提交的值。

这是我的全部代码:

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

这里我希望提交表单后的 mincost 和 maxcost 值也显示在 slider 上。请帮忙。非常感激。

Answer 1

您需要使用 slider 功能中的“值”选项。您需要将变量传递给“值”选项。

这是代码:

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