Javascript 绑定到选择的jquery UI滑块

成本：$

成本2：$

1000 2000 3000 4000 5000 1700 500 3700 4300 5070 $（函数（）{ var select=$（“#hdd”）； 变量滑块=$（“”）.insertAfter（选择）.slider({ 民:1,， 最高：5， 射程：“真”， 值：选择[0]。选择索引+1， 幻灯片：功能（事件、用户界面）{ 选择[0]。selectedIndex=ui.value-1； $（“#hddValue”）.text（$（“#hdd选项：选定”）.text（）； $（“#hddValue2”）.text（$（“#hdd2选项：选定”）.text（）； } }); //显示起始值 $（“#hddValue”）.html（$（'#slider'）.slider（'value'））； $（“#hddValue2”）.html（$（'#slider'）.slider（'value'））； }); 有人能帮我处理这个js脚本吗？我想做的是，当我移动滑块时，我希望每个选定的值显示在页面上，如两个选项值“hdd”和“hdd2”所示

现在的情况是，当我只移动滑块时，hdd会发生变化，当我在javascript中添加hdd2时，hdd2 html视图会冻结到第一个选项，并且不会发生变化

---

提前感谢。

您的更新方法仅更新两个选项，但使用第一个选项的值。 我还没有尝试过，但应该是这样的，顺便说一句。使用相同id的多个元素（你的滑块）是无效的，会破坏旧的浏览器

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

成本：$

成本2：$

1000
2000
3000
4000
5000
1700
500
3700
4300
5070
$（函数（）{
变量
$selects=$（“#hdd，#hdd2”），
$values=$（'.hddvalue'）
;
$selects.每个（函数（i）{
var sel=此；
$（“”）.insertAfter（选择）.slider({
民:1,，
最高：5，
射程：“真”，
值：sel.selectedIndex+1，
幻灯片：功能（事件、用户界面）{
sel.selectedIndex=ui.value-1；
$values.eq（i）.text（jQuery（this.find（'option:selected'）.text（））；
}
});
});
//显示起始值
$values.eq（0）.html（$（'.slider'）.eq（0）.slider（'value'））；
$values.eq（1）.html（$（'.slider'）.eq（1）.slider（'value'））；
});

您的更新方法仅更新两个选项，但使用第一个选项的值。 我还没有尝试过，但应该是这样的，顺便说一句。使用相同id的多个元素（你的滑块）是无效的，会破坏旧的浏览器

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

成本：$

成本2：$

1000
2000
3000
4000
5000
1700
500
3700
4300
5070
$（函数（）{
变量
$selects=$（“#hdd，#hdd2”），
$values=$（'.hddvalue'）
;
$selects.每个（函数（i）{
var sel=此；
$（“”）.insertAfter（选择）.slider({
民:1,，
最高：5，
射程：“真”，
值：sel.selectedIndex+1，
幻灯片：功能（事件、用户界面）{
sel.selectedIndex=ui.value-1；
$values.eq（i）.text（jQuery（this.find（'option:selected'）.text（））；
}
});
});
//显示起始值
$values.eq（0）.html（$（'.slider'）.eq（0）.slider（'value'））；
$values.eq（1）.html（$（'.slider'）.eq（1）.slider（'value'））；
});

$（函数（）{
变量
$selects=$（“#hdd，#hdd2”），
$values=$（'.hddvalue'）；
$selects.每个（函数（i）{
var sel=此；
$（“”）.insertAfter（sel）.slider({
民:1,，
最高：5，
射程：“真”，
值：sel.selectedIndex+1，
幻灯片：功能（事件、用户界面）{
sel.selectedIndex=ui.value-1；
$values.eq（i）.text（jQuery（this.find（'option:selected'）.text（））；
}
});
});
//显示起始值
$values.eq（0）.html（$（'.slider'）.eq（0）.slider（'value'））；
$values.eq（1）.html（$（'.slider'）.eq（1）.slider（'value'））；
});

$（函数（）{
变量
$selects=$（“#hdd，#hdd2”），
$values=$（'.hddvalue'）；
$selects.每个（函数（i）{
var sel=此；
$（“”）.insertAfter（sel）.slider({
民:1,，
最高：5，
射程：“真”，
值：sel.selectedIndex+1，
幻灯片：功能（事件、用户界面）{
sel.selectedIndex=ui.value-1；
$values.eq（i）.text（jQuery（this.find（'option:selected'）.text（））；
}
});
});
//显示起始值
$values.eq（0）.html（$（'.slider'）.eq（0）.slider（'value'））；
$values.eq（1）.html（$（'.slider'）.eq（1）.slider（'value'））；
});

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