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 만 이동하고 자바 스크립트에서 # hdd2를 추가하면 hdd2 HTML보기가 첫 번째 옵션에 고정되고 변경되지 않습니다.

미리 감사드립니다.

Answer 1

업데이트 방법은 둘 모두를 업데이트하지만 첫 번째 값만 선택합니다. Havent가 해봤지만 btw와 같이 보일 것입니다. 동일한 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')); 
});