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