基於選項選擇

Question

更改boostrap滑塊中的值我試圖在選項選擇時更改引導滑塊的限制和範圍值。 我也嘗試了一些東西，但沒有成功。我的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

請指教。由於

Answer 1

試試這個小提琴：http://jsfiddle.net/9uLydpz3/

的onchange="myChange()"已經從HTML取出，並用一個jQuery change({...在js通知事件所取代。這是因爲啓動順序存在問題。

滑塊定義的方式也已更改爲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]); 
    } 

}