0

私は Scriptaculous を使用して、最小値と最大値を示す 2 つのハンドルを持つ価格帯スライダーを作成しています。最小値と最大値を別々の非表示フィールドに保存するにはどうすればよいですか?

現在のスクリプトは次のとおりです。

<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フィールドに格納します。しかし、これを別のフィールドに保存したいと思います。これを行う方法？何か助けてください。

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 に答える