如果另一个元素的值发生变化,我需要设置滑块的值,反之亦然,但是我很难将另一个表单元素的值设置为滑块的值。
当Select元素的值发生变化时,下面的函数会改变Slider值,但我不能让它反向工作。我在这里发布了一个小提琴:http://jsfiddle.net/chayacooper/v3gUg/28/
我正在使用jQuery Slider Plugin,jquery-1.8.2和jquery-ui-1.9.1。
JS
$(document).ready(function () {
var select = $("#SliderSelect");
jQuery("#Slider").slider({
from: 1,
to: 5,
scale: ['Dislike', '', '', '', 'Love'],
limits: false,
step: 1,
dimension: '',
skin: "classic",
change: function (evt) {
$("#SliderSelect")[0].value = $(evt.target).slider("value");
}
});
$("#SliderSelect").change(function () {
jQuery("#Slider").slider("value", this.selectedIndex + 1);
});
});
我也尝试用这个语句替换代码并使用文本框而不是select元素,结果相同
$('#text_value').val( $(evt.target).slider("value") );
HTML 的
<div class="layout-slider">
<div id="Slider" type="slider" name="area" value="3"></div>
</div>
<select name="SliderSelect" id="SliderSelect">
<option>1</option>
<option>2</option>
<option selected=selected>3</option>
<option>4</option>
<option>5</option>
</select>
答案 0 :(得分:1)
根据doc you provided,您需要使用onstatechange
。此外,由于某种原因,滑块需要两个值才能使其正常工作......
$(document).ready(function () {
var select = $("#SliderSelect");
jQuery("#Slider").slider({
from: 1,
to: 5,
scale: ['Dislike', '', '', '', 'Love'],
limits: false,
step: 1,
dimension: '',
skin: "classic",
onstatechange: function (evt) {
//evt.target was causing internal error
// $("#SliderSelect").val($(evt.target).slider("value"));
$("#SliderSelect").val(evt);
}
});
$("#SliderSelect").change(function () {
jQuery("#Slider").slider("value", this.selectedIndex + 1, this.selectedIndex + 1);
});
});