jquery UI Slider绑定到选择

Posted 2023-03-13

【中文标题】jquery UI Slider绑定到选择

【英文标题】：jquery UI Slider bound to select

【发布时间】：2013-04-25 02:41:41

【问题描述】：

<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 发生变化，而当我在 javascript 中添加 #hdd2 时，hdd2 html 视图只是冻结到第一个选项并且不会改变。

提前谢谢你。

【参考方案1】：

您的更新方法只更新两个选择，但使用第一个的值。 没有尝试过，但它应该看起来像这样，顺便说一句。具有相同 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') );
);

【参考方案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') );
);