javascript - 選択にバインドされたjquery UIスライダー

Question

<p>Cost: $<span id="hddValue"></span></p>
<p>Cost2: $<span id="hddValue2"></span></p>

<select id="hdd">
  <option>1000</option>
  <option>2000</option>
  <option>3000</option>
  <option>4000</option>
  <option>5000</option>
</select>

<select id="hdd2">
  <option>1700</option>
  <option>500</option>
  <option>3700</option>
  <option>4300</option>
  <option>5070</option>
</select>

$(function () {
            var select = $('#hdd');
            var slider = $("<div id='slider'></div>").insertAfter(select).slider({
                min: 1,
                max: 5,
                range: "true",
                value: select[0].selectedIndex + 1,
                slide: function (event, ui) {
                    select[0].selectedIndex = ui.value - 1;
              $("#hddValue").text($('#hdd option:selected').text());
             $("#hddValue2").text($('#hdd2 option:selected').text());
                }
            });
        //show start value
        $( "#hddValue" ).html(  $('#slider').slider('value') );
        $( "#hddValue2" ).html(  $('#slider').slider('value') );
        });

このjsスクリプトを手伝ってくれる人はいますか? 私がやりたいことは、スライダーを動かすと、選択した各値がページに表示され、2 つのオプション値「hdd」と「hdd2」で見られるようになることです。

現在、スライダーを動かすと #hdd のみが変更され、JavaScript に #hdd2 を追加すると、hdd2 html ビューが最初のオプションにフリーズし、変更されません。

前もって感謝します。