根据选项 select 更改引导程序滑块中的值
Change value in boostrap slider based on option select
我正在尝试根据选项 select 更改 bootstrap 滑块的限制和范围值。
我也尝试了一些事情但没有成功。我的 Html 代码是:
<div class="form-group">
<div>
<h3>Range</h3>
</div>
<div class="select">
<select name="Levels" id="limit" onchange="myChange()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
JavaScript代码为:
var sliderB = new Slider("#ex16b", { min: 0, max: 90, value: [0, 10], focus: true });
函数 myChange()
{
if(document.getElementById("limit").value=="1")
{
document.getElementById("range2").value= "9";
document.getElementById("range1").value= "0";
sliderB.value="[50,70]";
$('#ex16b').slider('setValue', "[50,70]");
}
if(document.getElementById("limit").value=="2")
{
document.getElementById("range2").value= "90";
document.getElementById("range1").value= "10";
}
if(document.getElementById("limit").value=="3")
{
document.getElementById("range2").value= "120";
document.getElementById("range1").value= "0";
var RangeData = document.getElementById("ex2a");
RangeData.getAttributeNode("data-slider-value").value ="[10,20]";
}
}
CSS 是:
.Widthr2 {
padding : 4px;
margin4 : 20px;
width:25px;
text-align:center;}
我正在分享jsfiddle
请指教。谢谢
试试这个 Fiddle:http://jsfiddle.net/9uLydpz3/
onchange="myChange()"
已从 HTML 中删除,并在 js 中替换为 jquery change({...
事件通知程序。这是因为启动顺序有问题。
滑块的定义方式也已更改为 jQuery 方法,以方便更新。
$("#ex16b").slider({
min: 0,
max: 90,
value: [0, 10],
focus: true
});
$('#limit').change(function() {
myChange();
});
function myChange() {
if (document.getElementById("limit").value == "1") {
document.getElementById("range2").value = "9";
document.getElementById("range1").value = "0";
$("#ex16b").slider('setValue', [50, 70]); // this is where the setting happens
}
if (document.getElementById("limit").value == "2") {
document.getElementById("range2").value = "90";
document.getElementById("range1").value = "10";
$("#ex16b").slider('setValue', [10, 90]);
}
if (document.getElementById("limit").value == "3") {
document.getElementById("range2").value = "120";
document.getElementById("range1").value = "0";
$("#ex16b").slider('setValue', [0, 120]);
}
}
我正在尝试根据选项 select 更改 bootstrap 滑块的限制和范围值。 我也尝试了一些事情但没有成功。我的 Html 代码是:
<div class="form-group">
<div>
<h3>Range</h3>
</div>
<div class="select">
<select name="Levels" id="limit" onchange="myChange()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
JavaScript代码为:
var sliderB = new Slider("#ex16b", { min: 0, max: 90, value: [0, 10], focus: true });
函数 myChange() {
if(document.getElementById("limit").value=="1")
{
document.getElementById("range2").value= "9";
document.getElementById("range1").value= "0";
sliderB.value="[50,70]";
$('#ex16b').slider('setValue', "[50,70]");
}
if(document.getElementById("limit").value=="2")
{
document.getElementById("range2").value= "90";
document.getElementById("range1").value= "10";
}
if(document.getElementById("limit").value=="3")
{
document.getElementById("range2").value= "120";
document.getElementById("range1").value= "0";
var RangeData = document.getElementById("ex2a");
RangeData.getAttributeNode("data-slider-value").value ="[10,20]";
}
}
CSS 是:
.Widthr2 {
padding : 4px;
margin4 : 20px;
width:25px;
text-align:center;}
我正在分享jsfiddle
请指教。谢谢
试试这个 Fiddle:http://jsfiddle.net/9uLydpz3/
onchange="myChange()"
已从 HTML 中删除,并在 js 中替换为 jquery change({...
事件通知程序。这是因为启动顺序有问题。
滑块的定义方式也已更改为 jQuery 方法,以方便更新。
$("#ex16b").slider({
min: 0,
max: 90,
value: [0, 10],
focus: true
});
$('#limit').change(function() {
myChange();
});
function myChange() {
if (document.getElementById("limit").value == "1") {
document.getElementById("range2").value = "9";
document.getElementById("range1").value = "0";
$("#ex16b").slider('setValue', [50, 70]); // this is where the setting happens
}
if (document.getElementById("limit").value == "2") {
document.getElementById("range2").value = "90";
document.getElementById("range1").value = "10";
$("#ex16b").slider('setValue', [10, 90]);
}
if (document.getElementById("limit").value == "3") {
document.getElementById("range2").value = "120";
document.getElementById("range1").value = "0";
$("#ex16b").slider('setValue', [0, 120]);
}
}