0

我正在使用 Scriptaculous 创建一个带有两个手柄的价格范围滑块，表示最小值和最大值。如何将最小值和最大值存储在单独的隐藏字段中。

当前脚本如下，

<div id="price-range" class="filter-track">
    <span id="price-min" class="filter-handle" title="Scroll to set your minimum value">&gt;&gt;</span>
    <span id="price-max" class="filter-handle" title="Scroll to set your maximum value">&lt;&lt;</span>
</div>
<input type="hidden" name="price" id="beds" value="0,100"/>


var loadPriceSlider = function () {

        var handles = [$('price-min'), $('price-max')];

        // horizontal slider control with preset values
        new Control.Slider(handles, 'price-range', {
            range:$R(0, 5000, false),
            sliderValue: [0, 3000],
            values: [0, 100, 200, 300],
            restricted: true,
            onChange: function(v){ 
                            $('price').value = v; 
                        }
        });
    };

它将在price字段中存储逗号分隔的 (min,max) 值。但我想将其存储在单独的字段中。这该怎么做？请问有什么帮助吗？

4

1 回答 1

1

您的代码尝试引用 $('price') 但名称为“price”的输入具有“beds”的“id”。

这是具有价格字段和附加字段的更正 HTML：

<div id="price-range" class="filter-track">
    <span id="price-min" class="filter-handle"
        title="Scroll to set your minimum value">&gt;&gt;</span>
    <span id="price-max" class="filter-handle"
        title="Scroll to set your maximum value">&lt;&lt;</span>
</div>
<ul>
  <li>price: <input type="text" name="price" id="price" value="0,100"/></li>
  <li>myRange <input type="text" name="myRange" id="myRange" value="0,100"/></li>
</ul>

和 JavaScript：

var handles = [$('price-min'), $('price-max')];
// horizontal slider control with preset values
new Control.Slider(handles, 'price-range', {
    range: $R(0, 5000, false),
    sliderValue: [0, 3000],
    values: [0, 100, 200, 300],
    restricted: true,
    onChange: function(val){ 
        $('price').value = val; 
        $('myRange').value = val; 
    }
});

这有效，加载这些 JavaScript：

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=slider"></script>
于 2012-07-04T19:59:13.287 回答