<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视图只是冻结为第一个选项,并且没有变化。
先感谢您。
最佳答案
您的更新方法仅更新两个选择,但使用第一个选择的值。
哈芬(Havent)尝试过,但它看起来应该像这样,顺便说一句。具有具有相同ID(您的滑块)的mutliple元素无效,并且会破坏较旧的浏览器。
<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') );
});