jquery將多個下拉菜單轉換爲滑塊

Question

我試圖用滑塊替換一系列下拉菜單。一切似乎工作正常，但滑塊行事非常怪異，不知道是否因爲我使用了一個通用的類而不是給他們所有的ID？

基本上當我滾動滑塊而非預期：0,1,2,3它是沿1第一線條更然後0然後3然後2 ...

這是一個簡單的情況下不正確的設置還是僅僅是不可能以這種方式使用它們？

非常感謝，安東尼。

http://jsfiddle.net/Anth12/BnL93/1/

$(document).ready(function() { 
    $('.DropDownToSlider').each(function() { 
     var NewSlider = $(this).next(".DropDownSlider"); 

     var value = parseInt(NewSlider.text()); 
     $(this).val(value); 
     NewSlider.text(""); 


     NewSlider.slider({ 
      value: value, 
      min: 0, 
      max: 3, 
      slide: function (event, ui) { 
       $(this).prev(".DropDownToSlider").val($(this).slider("value")); 
       $(".SliderVal").text($(this).slider("value")); 
      } 
     }); 
    }); 
}); 

<select id="dd1" class="DropDownToSlider" style=""> 
    <option value="3">Admin</option> 
    <option value="2">Basic</option> 
    <option value="1">NoAuth</option> 
    <option value="0">Delete</option> 
</select> 
<div id="ddslider1" class="DropDownSlider">1</div> 
    <select id="dd2" class="DropDownToSlider" style=""> 
     <option value="3">Admin</option> 
     <option value="2">Basic</option> 
     <option value="1">NoAuth</option> 
     <option value="0">Delete</option> 
    </select> 
<div id="ddslider2" class="DropDownSlider">2</div> 

Answer 1

這是你想要達到什麼樣的？ http://jsfiddle.net/7f53c/17/

$('.DropDownToSlider').each(function() { 
     var NewSlider = $(this).next(".DropDownSlider"); 

     var value = parseInt(NewSlider.text()); 
     $(this).val(value); 
     NewSlider .text(""); 


     NewSlider.slider({ 
      value: value, 
      min: 0, 
      max: 3, 
      slide: function (event, ui) {     
       //$(this).prev(".DropDownToSlider").val($(this).slider("value")); 
       //$(".SliderVal").text($(this).slider("value")); 
       $(".SliderVal").text(ui.value); 
      } 
     }); 
    });