【问题标题】:Need to append price query to the current url?需要将价格查询附加到当前 url?
【发布时间】:2012-10-04 09:56:15
【问题描述】:

我正在使用下面的 JQUery 滑块代码..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.8.2.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.slider.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <style>
    #demo-frame > div.demo { padding: 10px !important; };
    </style>
    <script>
    $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#minprice" ).val( ui.values[ 0 ] );     
                $( "#maxprice" ).val( ui.values[1 ] );  

            }

        });

    });



    </script>
</head>
<body>

<div class="demo">


<form style="margin-top:10px">

      £<input type="text" size="4" id="minprice"> - £<input type="text" size="4" id="maxprice" >
<input type="hidden" name="price" id="pricefilter">

<input type="submit" value="GO" id="pricego" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
</form>

<div id="slider-range"></div>

</div><!-- End demo -->


</body>
</html>

我需要调整表单以将 2 个输入字段(minprice 和 maxprice)作为 1 个字段(price)发送到 URL。


我的意思是 url 的 o/p 应该是这样的:

http://www.mywebsite.com/category/shoes/?price=150-300


这将需要修改 HTML,可能还需要修改用于操作数据的 jQuery...

那么,谁能告诉我要做到这一点...?

【问题讨论】:

    标签: jquery html jquery-ui jquery-slider


    【解决方案1】:

    slide 函数更改为:

            slide: function( event, ui ) {
                $( "#minprice" ).val( ui.values[ 0 ] );     
                $( "#maxprice" ).val( ui.values[1 ] );  
                $( "#pricefilter" ).val( ui.values[0]+'-'+ui.values[1] );
            }
    

    【讨论】:

    • 嘿,非常感谢!但有一件事,我如何将#pricefilter 值分配给其他标签的某个属性..?
    • 只需在函数中添加更多语句即可将值放置在您想要的任何位置。如果您想在按钮中使用它,请使用$("#button").text(ui.values[0]+'-'+ui.values[1]);
    • 我如何将 #pricefilter 值分配给
    • 你不需要。由于它是表单中的(隐藏)字段,因此在您提交时会自动包含在表单数据中。
    猜你喜欢
    • 2013-07-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多