根据选项选择更改引导滑块中的值

Posted 2023-02-18

【中文标题】根据选项选择更改引导滑块中的值

【英文标题】：Change value in boostrap slider based on option select

【发布时间】：2017-10-05 17:36:18

【问题描述】：

我正在尝试在选择选项时更改引导滑块的限制和范围值。 我也尝试了一些东西，但没有成功。我的 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

请指教。谢谢

【问题讨论】：

我在这里更新了代码。 jsfiddle.net/4rg1g9hs 但不工作

【参考方案1】：

试试这个小提琴：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]);