jquery UI Slider, предназначенный для выбора

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 в javascript, hdd2 html-просмотр просто зависает с первым параметром и не изменяется.

заблаговременно.

Answer 1

Ваш метод обновления обновляет только оба варианта, но со значением первого. Havent попробовал, но он должен выглядеть примерно так, кстати. с несколькими элементами с одним и тем же идентификатором (ваши слайдеры) является недопустимым и разбивает старые браузеры.

<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')); 
});