需要在运行时将值传递给范围滑块Jquery函数

时间:2012-03-28 13:59:20

标签: jquery

我有一个关于range slider的JQuery函数。它运作正常。

<script type="text/javascript">
    jQuery(function() {         

        jQuery("#slider-range").slider({
            range: true,            
            min: 55, 
            max: 50000,
            values: [55, 50000],
            slide: function(event, ui) {
                jQuery("#minValue").val(ui.values[0]);
                jQuery("#maxValue").val(ui.values[1]);
            }
        });
        jQuery("#minValue").val(jQuery("#slider-range").slider("values", 0));
        jQuery("#maxValue").val(jQuery("#slider-range").slider("values", 1));
});
</script>

现在,我需要在运行时从MySql数据库中动态传递函数中maxmin的值,以指示滑块的范围。

我尝试使用隐藏字段设置这些值,如下所示。

<script type="text/javascript">
    jQuery(function() {         

     var mini=document.getElementById("hid_min_price").value;
     var maxi=document.getElementById("hid_max_price").value; 

        jQuery("#slider-range").slider({
            range: true,            
            min: mini, 
            max: maxi,
            values: [mini, maxi],
            slide: function(event, ui) {
                jQuery("#minValue").val(ui.values[0]);
                jQuery("#maxValue").val(ui.values[1]);
            }
        });
        jQuery("#minValue").val(jQuery("#slider-range").slider("values", 0));
        jQuery("#maxValue").val(jQuery("#slider-range").slider("values", 1));
});
</script>

但它不起作用。那么如何在运行时动态设置maxmin的值?

1 个答案:

答案 0 :(得分:1)

您可以从数据库中获取最小值最大值,然后将它们分配给标记内的javascript变量。

让我们假设您使用的是php,代码看起来像这样:

...

echo '
<script type="text/javascript">
    jQuery(function() {         

        var mini='.$min.';
        var maxi='.$max.';

        jQuery("#slider-range").slider({
            range: true,            
            min: mini, 
            max: maxi,
            values: [mini, maxi],
            slide: function(event, ui) {
                jQuery("#minValue").val(ui.values[0]);
                jQuery("#maxValue").val(ui.values[1]);
            }
        });
        jQuery("#minValue").val(jQuery("#slider-range").slider("values", 0));
        jQuery("#maxValue").val(jQuery("#slider-range").slider("values", 1));
});
</script>';

...

来自DB的$ min和$ max contian数据。