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腳本嗎？我想要做的是當我移動滑塊時，我希望每個選定值都顯示在頁面上，如在兩個選項值「hdd」和「hdd2」上看到的。

現在發生的事情是當我只移動滑塊#hdd變化，當我在javascript中添加＃hdd2時，hdd2 html視圖只是凍結到第一個選項，並沒有改變。

謝謝你提前。

Answer 1

您的更新方法只會更新兩個選擇，但會更新第一個選擇的值。 沒有嘗試過，但它應該看起來像這樣，順便說一句。具有相同ID的多個元素（您的滑塊）無效並且會破壞較舊的瀏覽器。

<p>Cost: $<span class="hddvalue"></span></p> 
<p>Cost2: $<span class="hddvalue"></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 
       $selects = $('#hdd,#hdd2'), 
       $values = $('.hddvalue') 
      ; 
      $selects.each(function (i) { 
       var sel = this; 
       $("<div class='slider'></div>").insertAfter(select).slider({ 
        min: 1, 
        max: 5, 
        range: "true", 
        value: sel.selectedIndex + 1, 
        slide: function (event, ui) { 
         sel.selectedIndex = ui.value - 1; 
         $values.eq(i).text(jQuery(this).find('option:selected').text()); 
        } 
       }); 
      }); 

     //show start value 
     $values.eq(0).html( $('.slider').eq(0).slider('value')); 
     $values.eq(1).html( $('.slider').eq(1).slider('value')); 
}); 

Answer 2

$(function() { 
      var 
       $selects = $('#hdd,#hdd2'), 
       $values = $('.hddvalue'); 
      $selects.each(function (i) { 
       var sel = this; 
       $("<div class='slider'></div>").insertAfter(sel).slider({ 
        min: 1, 
        max: 5, 
        range: "true", 
        value: sel.selectedIndex + 1, 
        slide: function (event, ui) { 
         sel.selectedIndex = ui.value - 1; 
         $values.eq(i).text(jQuery(this).find('option:selected').text()); 
        } 
       }); 
      }); 

     //show start value 
     $values.eq(0).html( $('.slider').eq(0).slider('value')); 
     $values.eq(1).html( $('.slider').eq(1).slider('value')); 
});